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

Рассмотрим эту структуру; --MyModule ---- Заголовок ---- 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 является частью объявлений двух модулей: MyModule и DynamicModule! Пожалуйста, подумайте о перемещении HeaderComponent в модуль более высокого уровня, который импортирует MyModule и DynamicModule. Вы также можете создать новый NgModule, который экспортирует и включает HeaderComponent, а затем импортирует этот NgModule в MyModule и DynamicModule.

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


angular storybook ng-modules angular-components
person Mohamed    schedule 01.03.2019    source источник
comment
Каждый компонент может быть частью только одного модуля. Если вы хотите использовать его в большем количестве модулей, вам необходимо создать новый модуль, который будет объявлять и экспортировать этот компонент, а затем вы можете импортировать этот модуль в другие модули.   -  person Josef Katič    schedule 02.03.2019
comment
Он определен только в одном модуле, я считаю, что сборник рассказов динамически генерирует другой модуль и объявляет его.   -  person Mohamed    schedule 02.03.2019
comment
Попробуйте удалить объявление из вашего модуля.   -  person Josef Katič    schedule 02.03.2019
comment
Решили, убрав объявление?   -  person Josef Katič    schedule 04.03.2019
comment
Нет, мне пришлось отредактировать исходник сборника рассказов.   -  person Mohamed    schedule 04.03.2019

Ответы (1)


arrow_upward
1
arrow_downward

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

Пример (для контекста 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
		}));

person Benjamin Fritz    schedule 11.04.2019