Question

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

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

模板解析错误：“ header-logo”不是已知元素： 1.如果“ header-logo”是一个Angular组件，则确认它是该模块的一部分。 2.如果“ header-logo”是一个网站然后，组件将“ 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'还具有另一个属性'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
		}));

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

1 个答案: