Как использовать относительный угловой компонент в сборнике рассказов?

Question

Рассмотрим эту структуру;--MyModule ---- Header ---- HeaderLogo

Я пытаюсь разработать угловые компоненты в сборнике рассказов.Я могу видеть и разрабатывать один компонент, но когда я импортирую компонент в другой компонент (логотип заголовка в заголовок) (тот же модуль), я получаю следующую ошибку:

Ошибки синтаксического анализа шаблона:'header-logo' не является известным элементом: 1. Если 'header-logo' является угловым компонентом, то убедитесь, что он является частью этого модуля.2. Если 'header-logo' является веб-компонентом, то добавьте 'CUSTOM_ELEMENTS_SCHEMA' к '@ NgModule.schemas' этого компонента, чтобы подавить это сообщение.

Когда я добавляю родительский модуль в moduleMetadata, напримерthis (для импорта HeaderLogo),

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

Я получаю;

index.js: 19 Ошибка: Тип HeaderComponent является частью объявлений 2 модулей: MyModule иDynamicModule!Пожалуйста, рассмотрите возможность перемещения HeaderComponent в модуль более высокого уровня, который импортирует MyModule и DynamicModule.Вы также можете создать новый NgModule, который экспортирует и включает в себя HeaderComponent, а затем импортирует этот NgModule в MyModule и DynamicModule.

Как я могу заставить эту работу работать?

Answer 1

'moduleMetadata' также имеет другое свойство объявлений.Вы можете использовать это, чтобы добавить компонент, который вы хотите.Это лучший способ добавить компоненты из того же модуля, что и компонент, который вы документируете.

Пример (для углового контекста):

Предполагая, что '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
		}));