问题标签 [angular-storybook]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
54 浏览

angular - 为 Angular 库设置故事书 SCSS 导入路径

我在 Angular 库的根目录下设置了 Storybook。

要配置 SCSS 导入路径,我已将以下内容添加到我的库中ng-package.json

但是 Storybook 无法从该目录中找到样式表。

如果我将以下内容添加到根目录angular.json下的architect > builder > build > options故事书将正确解析导入,但角度构建将失败,因为angular.json验证失败:

如何使为库设置的包含路径适用于 Storybook,而无需覆盖默认的 webpack 配置?或者如何在仅添加自定义包含路径的同时保留默认值?

0 投票
1 回答
49 浏览

javascript - 如何在 Storybook 中使用可观察对象或主题更新 Angular 组件?

subject.next(false)我想使用一个主题来更新我的 Angular 组件,但是当我调用Storybook时它不起作用。组件实例的属性已更新,但不适用于画布面板。

我有一个像这样的加载组件

和这样的装载服务

和这样的加载故事

问题是: 之后npm run storybook,我可以得到状态是false,但画布面板中的加载图标仍然显示。那么如何在 Storybook 中使用 observable 或 subject 更新 Angular 组件呢?


附加说明 loading.component.html

它像这样工作

只是在故事书播放功能中不起作用

0 投票
0 回答
24 浏览

angular - 如何在 storyBook 中使用 control-value-accessor?

我有一个自定义输入组件并想创建故事(使用故事书)

输入组件.ts

输入.story.ts

当我尝试运行时storybook,它编译成功,但在控制台中,出现以下错误:NullInjectorError: No provider for NgControl!

我已经导入FormsModuleReactiveFormsModuleInput.story.ts仍然有同样的错误,我做错了什么?或失踪?

0 投票
0 回答
11 浏览

webpack - 将反射元数据与 Nx + Storybook 一起使用?

嗨,我想弄清楚如何让 Reflect Metadata 在使用故事书的 Nx Lib 空间中工作。

Nx 本身可以生成一个库,也可以使用 nx 生成开箱即用的故事书配置

但是,当Reflect.defineMetadata()在依赖关系树下的文件之一中使用代码语法时。服务故事书不再有效(错误消息很少:/)。

我可以通过import 'reflect-metadata';使用Reflect.defineMetadata(). 但是我知道import 'reflect-metadata'应该只导入一次,这样做会污染我的源文件。是否有一个故事书文件作为服务构建的入口点?

例如,Jest 测试框架允许我添加import 'reflect-metadata'一个jest.setup.ts可以在我的所有测试中使用的文件。


参考:

Nx 故事书:https ://nx.dev/storybook/overview-angular 。
反映元数据:https ://www.npmjs.com/package/reflect-metadata

0 投票
0 回答
21 浏览

storybook - 带有 Angular 的故事书找不到匹配“故事标题--任务名称”的故事

我尝试在我的 Angular 项目中使用 Storybook,但遇到了一个神秘的错误消息,我对这里发生的事情一无所知。

这是我的tag.component.stories.ts文件:

我收到此错误消息:

所以,我很确定在阅读了文档的“简单组件”部分后,我不知道应该如何或在哪里为故事定义任何 id。

这是我的.storybook/main.js

这是我认为的出厂默认设置。

还检查了浏览器控制台,没有别的,只是两次可见消息。

知道如何解决这个问题吗?

0 投票
1 回答
65 浏览

tailwind-css - 如何在 Nx 工作区 Angular 库中为 Storybook 启用 Tailwind.css?

我在 Nx 工作区中创建了一个 Angular 库来提供 ui-components (ui-kit)。在这个库中,我添加了运行良好的 Storybook。现在我还想包含 Tailwind,因为组件会使用它。

我使用该nx generate @nrwl/angular:setup-tailwind --project=ui-kit --buildTarget=build-storybook命令为该库设置了顺风。该库是可构建的。

我有一个tailwind.config.js,它看起来像这样:

并添加了带有内容的 tailwind-imports.css

作为导入到preview.js库的 .storybook 文件夹中。

但是,没有顺风。

是否有任何可遵循的配方或 nx、角度、故事书和顺风的一些运行示例?

使用 nx 版本 13.8.3

非常感谢您的帮助!

0 投票
0 回答
35 浏览

javascript - 导入 react 组件并自动添加到 dom

我正在尝试在这样的 javascript 文件中运行我的 jsx:

然后我有一个 mdx 文件,它像这样导入反应组件:

这不会创建组件,只会Create New Component输出到控制台,我希望两者console.logs都能打印。


当我将组件导入到我的 MDX 文件中并放置 html 时,它就可以正常工作:

然后我有一个 mdx 文件,它像这样导入反应组件:

Created Component这将在控制台中创建组件和输出。


我需要做些什么来使用第一种导入文件的方法,这样我就不必将元素放在我的所有 mdx 文件中了吗?

0 投票
0 回答
12 浏览

javascript - 如何为故事书的项目添加独立功能

我开始将故事书集成到我们的应用程序中,我想要实现的目标之一是:我们有一个深色和浅色主题,通过 sass 相应地更改 css 变量:

通常,我们有一个服务负责这个逻辑,但是 UI 组件不会自己注入它。现在我想知道是否有一种方法可以使用不属于特定组件的函数来执行类似的操作。我试过查看“storybook-dark-mode”(https://storybook.js.org/addons/storybook-dark-mode),这让我可以添加一个“dark-theme”类到故事书的文档,但不在应用程序本身中(在 iframe 内)。是否有可能做这样的事情:

并以某种方式在故事中使用toggleDarkTheme?

0 投票
0 回答
21 浏览

angular - 如何调用另一个项目中的组件?

正在创建一个项目,其中包含我在前面需要的所有组件和组合物,在运行 npm run copy 后,我在前面的项目中调用了它,但我没有正确得到它,所有卡都是空的。请问有什么解决办法吗?