- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我们在结合使用 Spartacus、Angular 和 Storybook 时遇到了问题。
对于那些不熟悉的人:Storybook 是一个 UI 开发环境,它能够以一种独立的方式展示 UI 组件,并具有一些 playground 功能(更多信息在这里:https://storybook.js.org/docs/basics/introduction/)。我们希望能够在 Storybook 中展示从 Spartacus 库导入的一些 UI 组件,以便能够与我们的视觉设计师就我们将使用的 UI 元素创建一致的叙述。
Storybook 支持 Angular,对于简单的组件,配置 Storybook 以查看定义的组件(定制的或来自库的组件)就足够了,它会在 Storybook 环境中显示它。对于更复杂的 Angular 组件,也可以通过模块元数据提供一个“模拟”上下文,它可以包含导入和声明之类的东西,就像常规的 Angular 模块一样(更多信息在这里:https://www.learnstorybook.com/intro-to-storybook/angular/en/composite-component/)。
当简单地从 Storybook 中的 Spartacus 指向一个组件时,如果没有任何额外的数据,将会出现很多关于缺少声明的错误。此屏幕截图中的示例:
Storybook errors showing missing declarations of 'cxTranslate' and 'cx-icon'
通过模块元数据导入包含缺失声明的模块,这些问题中的很多似乎都得到了解决。然而,我们真正的问题在于管道(如屏幕截图中提到的“cxTranslate”管道)。因为 Spartacus 在几乎所有组件模板中都使用像 cx-translate/TranslatePipe 这样的管道,所以必须导入它们才能使组件正常工作。但是,如下面的文件所示,将这些管道添加到 Storybook 的模块元数据声明中并不能(完全)解决问题。
searchbox.stories.ts:
import { IconModule, HighlightPipe, MediaModule, SearchBoxComponentService } from '@spartacus/storefront';
import { RouterModule } from '@angular/router';
import { UrlPipe, TranslatePipe } from '@spartacus/core';
import { CustomSearchboxComponent } from 'src/app/general/custom-searchbox/custom-searchbox.component';
export default {
title: 'Searchbox',
decorators: [
moduleMetadata({
imports: [IconModule, RouterModule, MediaModule],
declarations: [TranslatePipe, HighlightPipe, UrlPipe],
providers: [SearchBoxComponentService]
}),
]
};
export const Default = () => ({
component: CustomSearchboxComponent
});
该组件的 Storybook 页面将不再提示管道名称不存在,但它会在 Storybook 环境中显示一个空白组件,并导致 DevTools 控制台中出现错误(见下文)。
DevTools console showing ERROR NullInjectorError: StaticInjectorError(DynamicModule)[store]
许多导致此错误的一般 Angular 问题我可以在网上找到有关信息,似乎是导入/声明丢失或使用不当的问题。但是,我无法找到使 Spartacus 组件在 Storybook 中工作的配置。
有人可以帮助阐明这个问题吗?
最佳答案
我不能确定,因为我没有使用 Storybook 和 Spartacus 组件的经验。
也就是说,这个错误看起来很眼熟。对我来说,这看起来像是与 ngrx 商店相关的错误。由于您提供了实际的 SearchBoxComponentService
,它依赖于 NgRx 存储的外观,我认为这可能是原因。
要解决这个问题,您可以为 SearchBoxComponentService
提供一个模拟,例如:
{ provide: SearchBoxComponentService, useClass: MockSearchBoxComponentService }
模拟只是一个没有逻辑的假人。
或者,您可以尝试创建一个空的 Ngrx 存储 https://github.com/storybookjs/storybook/issues/3217 .
希望这对您有所帮助!
关于angular - 在 Storybook 中显示 Spartacus 组件的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60633317/
我想知道如何将外部 javascript 加载到故事书中的特定故事中。我现在能找到的唯一文档是如何在全局范围内做到这一点 https://storybook.js.org/docs/react/con
我的组件中有一个悬停样式: const style = css` color: blue; &:hover { color: red; } `; 您可以在 Storybook 中模
我正在使用Storybook Windows 7 上的版本 3.3.15 运行节点版本 6.3.1 和 npm 版本 3.10.6。 在运行故事书时,我在呈现操作面板的页面底部看到“没有可用的面板”消
我将 Storybook 与 React 项目一起使用,该项目也使用样式化组件。许多样式定义访问 :root 中 index.css 文件中定义的 CSS 变量值,该文件位于 src 目录的根目录。所
我正在使用明暗主题制作 PWA,我想创建我的 Storybook 明暗主题来反射(reflect)这些主题。 所以我创建了一个函数,如果我向它传递一个 Material UI 主题和一个基本名称,它将
我目前在正确加载模块方面遇到了 Storybook 的大问题。 我真的无法提供一个独立的例子,因为这些问题看起来如此不稳定且难以预测。 基本上故事书正在运行,它正在尝试导入文件,但是这一步出了点问题。
您可以使用 Storybook 将一个 .stories 文件导入到另一个 .stories 文件中吗? 例如我有 /component1/component1.tsx /component1/com
我在本地运行 Storybook 没有问题。我可以使用 npm runstorybook 命令启动它。但是,当我尝试在 Azure 应用服务中托管 Storybook 时,运行 npm run Sto
Storybook 非常适合展示和记录组件,但我也有一些实用函数和类,我想添加到 storybook 中,是否可以使用它的控件作为这些函数参数? 最佳答案 要为非 UI 元素编写文档,只需使用 MDX
嗨,有没有人在 NX 工作区中使用 Scss/Sass 在 Storybook 中使用 Angular9+? 有工作指南吗?它对我不起作用,所以我可能做错了什么。 (故事书和 NX 的新内容) 该应用
我已经试过了。 npx -p @storybook/cli sb init --type angular,在现有项目上,但失败了。 依赖关系看起来像: "dependencies": { "@
我正在尝试将项目的当前版本(基本上是 version 中的 package.json 字段)添加到故事书,以便故事书的消费者可以知道他们正在查看项目的哪个版本。但是,我发现这样做非常困难,我无法在配置
我想得到这个: 我的stories.tsx代码如下所示: export default { title: "Components/Switch", argTypes: { color:
我的React应用程序中有故事书,由于某种原因,当我运行yarn storybook时,它总是打开相同的故事(它会自动选择selectedKind和selectedStory)。如何手动选择默认故事?
当我编辑一个组件并发生热模块重新加载时,所有其他具有相同标题的故事都会消失。唯一仍然存在的是我刚刚编辑的组件的故事。 在 component1.stories.tsx 中: import * as R
您好,我是 React 的初学者,我正在试用 Storybook,当我尝试运行 Storybook 时出现以下错误。 **我尝试使用 npm update 进行更新,我认为与我的依赖项有冲突 ** E
我的 Storybook 不能很好地扩展大量组件,所以我希望我可以用 Storybook 异步注册故事 我喜欢使用的语法是这样的 const storyRoot = storiesOf(`${CORE
我正在尝试从旋钮迁移到控件,但遇到嵌套对象的问题。 举个例子,假设我有一个像这样的对象作为组件的 Prop ...... object : { properties: { color: 'bl
我是故事书的新手。当我浏览关于故事书的文档和视频时,我读到了旋钮插件。旋钮插件和控件看起来很相似。这两件事有什么区别? 最佳答案 Storybook 版本 6 引入了控件。它们取代了大多数用例的旋钮。
我注意到 Storybooks Options Docs 中的一个属性叫 selectedPanel我认为这将允许我预先选择一个插件面板。 我不清楚如何使用它。例子是: options: { sele
我是一名优秀的程序员,十分优秀!