จะใช้องค์ประกอบเชิงมุมสัมพัทธ์ใน Storybook ได้อย่างไร

พิจารณาโครงสร้างนี้ --MyModule ----ส่วนหัว ----HeaderLogo

ฉันกำลังพยายามพัฒนาส่วนประกอบเชิงมุมในหนังสือนิทาน ฉันสามารถดูและพัฒนาส่วนประกอบเดียวได้ แต่เมื่อฉันนำเข้าส่วนประกอบไปยังส่วนประกอบอื่น (โลโก้ส่วนหัวลงในส่วนหัว) (โมดูลเดียวกัน) ฉันได้รับข้อผิดพลาดต่อไปนี้

ข้อผิดพลาดในการแยกวิเคราะห์เทมเพลต: 'header-logo' ไม่ใช่องค์ประกอบที่รู้จัก: 1. หาก 'header-logo' เป็นส่วนประกอบเชิงมุม ให้ตรวจสอบว่าเป็นส่วนหนึ่งของโมดูลนี้ 2. หาก 'header-logo' เป็น Web Component ให้เพิ่ม 'CUSTOM_ELEMENTS_SCHEMA' ลงใน '@NgModule.schemas' ของส่วนประกอบนี้เพื่อระงับข้อความนี้

เมื่อฉันเพิ่มโมดูลพาเรนต์ให้กับ moduleMetadata เช่นนี้ (เพื่อนำเข้า HeaderLogo)

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

ฉันได้รับ;

index.js:19 ข้อผิดพลาด: ประเภท HeaderComponent เป็นส่วนหนึ่งของการประกาศของ 2 โมดูล: 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' ยังมี 'การประกาศ' คุณสมบัติอื่นอีกด้วย คุณสามารถใช้สิ่งนั้นเพื่อเพิ่มส่วนประกอบที่คุณต้องการ นั่นดูเหมือนจะเป็นวิธีที่ดีที่สุดในการเพิ่มส่วนประกอบจากภายในโมดูลเดียวกันกับส่วนประกอบที่คุณกำลังจัดทำเอกสาร

ตัวอย่าง (สำหรับบริบทเชิงมุม):

สมมติว่า '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