如何在 Storybook 中使用相对角度分量？答案

【问题标题】：How to use relative angular component in Storybook?如何在 Storybook 中使用相对角度分量？
【发布时间】：2019-07-24 00:04:52
【问题描述】：

考虑这个结构； --我的模块 ----标题 ----HeaderLogo

我正在尝试在故事书中开发角度组件。我能够查看和开发单个组件，但是当我将组件导入另一个组件（标题徽标到标题）（相同模块）时，我收到以下错误；

模板解析错误：'header-logo' 不是已知元素： 1. 如果 'header-logo' 是一个 Angular 组件，那么验证它是这个模块的一部分。 2.如果'header-logo'是一个Web 然后组件将“CUSTOM_ELEMENTS_SCHEMA”添加到“@NgModule.schemas” 此组件以禁止显示此消息。

当我像这样将父模块添加到moduleMetadata（导入HeaderLogo）时，

addDecorator(
  moduleMetadata({
    imports: [MyModule],
  })
);

我明白了；

index.js:19 错误：类型 HeaderComponent 是声明的一部分 2 个模块：MyModule 和 DynamicModule！请考虑将 HeaderComponent 移动到导入的更高模块 MyModule 和 DynamicModule。你也可以新建一个导出并包含 HeaderComponent 的 NgModule 然后导入它 MyModule 和 DynamicModule 中的 NgModule。

我怎样才能做到这一点？

【问题讨论】：

每个组件只能是一个模块的一部分。如果您想在更多模块中使用它，则需要创建一个新模块，该模块将声明和导出该组件，然后您可以将该模块导入更多模块。
它只定义在一个模块下，我相信storybook是动态生成另一个模块并声明它。
尝试从你的模块中删除声明。
你通过删除声明解决了吗？
不，我必须编辑故事书来源。

标签： angular angular-components storybook ng-modules

【解决方案1】：

'moduleMetadata' 还有另一个属性'declarations'。您可以使用它来添加所需的组件。这似乎是从与您正在记录的组件相同的模块中添加组件的最佳方式。

示例（对于 Angular 上下文）：

假设“HeaderComponent”和“HeaderLogoComponent”来自同一个模块。

/** List of module dependencies and component declarations. Stored as separate var because they are shared among all stories */
const modules = {
	imports: [MatIconModule, BrowserAnimationsModule],
	declarations: [HeaderLogoComponent]
};

/** Prepared actions to make sure they are consistently available throughout the story set */
const actions = {
	doTheThing: action('Do it')
};

storiesOf('UI|Headers/Main Header', module)
	.addDecorator(withA11y)
	.addDecorator(withKnobs)
	.add('with Logo and stuff',
		() => ({
			component: HeaderComponent,
			props: {
				formLabel: text('formLabel', undefined),
				primaryColor: '#FFFFFF',
				doThings: actions.doTheThing
			},
			moduleMetadata: modules
		}));

【讨论】：