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

Question

考虑这个结构; --MyModule ---- Header ---- 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的更高模块。您还可以创建一个新的NgModule，它导出并包含HeaderComponent，然后在MyModule和DynamicModule中导入该NgModule。

我怎样才能做到这一点？

Answer 1

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

示例（对于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
		}));