问题标签 [angular-storybook]

默认似乎是黑色背景，但我想要一个白色的。我尝试使用浅色主题、自定义主题和背景添加，但无论我做什么，我都无法更改画布的颜色。

我有一个下拉指令，我想将它添加到我的故事书中，但它不起作用。当我运行故事书上的按钮时，但如果我单击按钮，则不会显示模板。

我开始在 Angular 9 项目中使用 compodoc + storybook。

安装了所有依赖项，Storybook 工作正常，但由于某种原因，compodoc 生成的 documentation.json 是空的，如下所示：

我正在使用的命令是：

我的 tsconfig.json 是：

有什么想法可能是错的吗？

我正在将故事书添加到现有应用程序中。除了一些现在已经过去的痛苦问题之外，它基本上是成功的，但是我遇到了一个新问题。我有多个从抽象基类扩展的组件，它们抱怨它们无法解析参数。例如：Error: Can't resolve all parameters for MyComponent: (?, ?, ?, ?, ?, ?, ?)

这个组件没有构造函数，但它扩展的基类有，并且有 7 个参数匹配 7 个问号。我已经为 storybook 提供了使用 through 的类moduleMetadata，这些类适用于具有自己的构造函数的其他组件，但不适用于这些组件。

如果我有一个假构造函数来将参数传递给 super() ，那么它就可以工作，但我不想为所有此类组件添加这个无意义的构造函数。

下面是一个非常精简的代码示例。

故事档案：

组件文件：

基本组件文件：

有了上面的内容，我得到了关于未解析参数的错误。但是，如果我将以下内容添加到组件文件中，则它可以正常工作并按预期将组件安装到故事书中：

但是，正如您可以想象的那样，我不想仅仅为了故事书而向所有这些扩展这个基类而没有自己的构造函数的组件添加一个毫无意义的构造函数。

谁能建议我还能尝试什么，或者我可能会错过什么？非常感谢。

tl:dr 故事书中的组件无法解析抽象基类的参数，除非我向组件添加构造函数并将这些值传递给 super()，怎么办？

升级到 Angular 10 后，某些组件出现以下错误 -

导致此问题的代码 -

我错过了什么吗？

在此先感谢您的帮助！

我试过这个。npx -p @storybook/cli sb init --type angular，在现有项目上但失败了。

依赖项看起来像：

我也尝试删除节点模块并再次安装，它只是回到这里。

我在 Storybook 中记录我的组件。我添加@storybook/addon-docs并在 *.stories.ts 中定义了这样的故事：

带有样式的按钮显示正确，但是当有人单击“显示代码”时，它会显示故事的代码，而不仅仅是模板。

是否可以配置“显示代码”显示模板，而不是整个故事？

安装和启动故事书时出现以下错误。

版本

开发依赖

我正在尝试测试角度分量的输出。

我有一个复选框组件，它使用 EventEmitter 输出其值。复选框组件包含在故事书故事中，用于演示和测试目的：

我正在使用一个动作来捕获值变化并将其记录到屏幕上。

然而，在为这个组件编写 cypress e2e 时，我只使用 iFrame 而不是整个故事书应用程序。

我想找到一种方法来测试输出是否正常。我尝试在 iFrame 中的 postMessage 方法上使用间谍，但这不起作用。

然后断言将是：

有没有其他方法可以断言(changeValue)="changeValue($event)" 已经解雇？

我正在尝试创建一个新的 Angular 10 库和一个单独的 Storybook，因为它是文档和开发视图。当 html 和样式在 *.component.ts 文件中内联时，一切都按预期工作。但是，每当我尝试使用单独的 html 和 scss 文件创建新组件时，Storybook 都会在控制台中给出一个错误，即找不到.component.html/ .component.scss。

重现步骤

创建一个新库

这将生成一个具有以下设置的组件：

接下来我做的是构建库， cd 到dist/my-lib文件夹并运行npm link.

我还创建了另一个包含 Storybook 项目的 Angular 项目，我按照本教程开始使用它：https ://www.learnstorybook.com/intro-to-storybook/angular/en/get-started/

完成教程后，我将之前构建的库添加到故事书项目中npm link my-lib，并在其中创建了一个新的故事文件/src/stories。之后，我将组件导入故事文件中import { NotificationComponent } from 'my-lib';，一切似乎都很好，因为它可以在链接的 npm 包中找到正确的组件。

但是每当我运行 Storybook 时，npm run storybook我都会收到以下错误，因为它找不到正确的 templateUrl 和 styleUrl：

GET http://localhost:6006/notification.component.html 404 (Not Found)

zone.js:690 Unhandled Promise rejection: Failed to load notification.component.html ; Zone: <root> ; Task: Promise.then ; Value: Failed to load notification.component.html undefined

现在我想知道是否可以分离 html/scss/ts 文件，因为我更喜欢这样的可读性。如果这是可能的，我怎样才能确保运行故事书时组件的根不是./？我应该添加某种 webpack 配置还是有其他解决方案？

如果有任何不清楚的地方，请随时询问，我会尽力提供信息。

谢谢你和亲切的问候，

卫斯理