Bagaimana cara menggunakan komponen sudut relatif di Buku Cerita?

Pertimbangkan struktur ini; --MyModule ----Header ----HeaderLogo

Saya mencoba mengembangkan komponen sudut di buku cerita. Saya dapat melihat dan mengembangkan satu komponen, tetapi ketika saya mengimpor komponen ke komponen lain (logo header ke header) (modul yang sama) saya mendapatkan kesalahan berikut;

Kesalahan penguraian templat: 'logo-header' bukan elemen yang diketahui: 1. Jika 'logo-header' adalah komponen Angular, verifikasi bahwa itu adalah bagian dari modul ini. 2. Jika 'header-logo' adalah Komponen Web, tambahkan 'CUSTOM_ELEMENTS_SCHEMA' ke '@NgModule.schemas' komponen ini untuk menyembunyikan pesan ini.

Ketika saya menambahkan modul induk ke moduleMetadata seperti ini (untuk mengimpor HeaderLogo),

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

saya mengerti;

index.js:19 Kesalahan: Tipe HeaderComponent adalah bagian dari deklarasi 2 modul: MyModule dan DynamicModule! Harap pertimbangkan untuk memindahkan HeaderComponent ke modul yang lebih tinggi yang mengimpor MyModule dan DynamicModule. Anda juga dapat membuat NgModule baru yang mengekspor dan menyertakan HeaderComponent lalu mengimpor NgModule tersebut di MyModule dan DynamicModule.

Bagaimana saya bisa membuat ini berhasil?


angular storybook ng-modules angular-components
person Mohamed    schedule 01.03.2019    source sumber
comment
Setiap komponen hanya dapat menjadi bagian dari satu modul. Jika Anda ingin menggunakannya di lebih banyak modul maka Anda perlu membuat modul baru yang akan mendeklarasikan dan mengekspor komponen tersebut dan kemudian Anda dapat mengimpor modul tersebut ke lebih banyak modul.   -  person Josef Katič    schedule 02.03.2019
comment
Ini hanya didefinisikan dalam satu modul, saya yakin buku cerita secara dinamis menghasilkan modul lain dan mendeklarasikannya.   -  person Mohamed    schedule 02.03.2019
comment
Coba hapus deklarasi dari modul Anda.   -  person Josef Katič    schedule 02.03.2019
comment
Sudahkah Anda menyelesaikannya dengan menghapus deklarasi?   -  person Josef Katič    schedule 04.03.2019
comment
Tidak, saya harus mengedit sumber buku cerita.   -  person Mohamed    schedule 04.03.2019

Jawaban (1)


arrow_upward
1
arrow_downward

'moduleMetadata' juga memiliki properti 'deklarasi' lainnya. Anda dapat menggunakannya untuk menambahkan komponen yang Anda inginkan. Tampaknya itu adalah cara terbaik untuk menambahkan komponen dari dalam modul yang sama dengan komponen yang Anda dokumentasikan.

Contoh (untuk konteks Angular):

Dengan asumsi 'HeaderComponent' dan 'HeaderLogoComponent' berasal dari modul yang sama.

/** 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