angular - โหมดเข้มงวด - ความเข้ากันไม่ได้ของประเภทเมื่อกำหนดค่าให้กับ ngComponentOutlet ด้วยคอมโพเนนต์ที่โหลดแบบเลซี่

ฉันกำลังพยายามโหลดคอมโพเนนต์แบบ lazy-load ใน Angular 11 (โหมดเข้มงวด) ตามคู่มือนี้ โหมดเข้มงวดเป็นปัญหาเพราะแทบไม่มีตัวอย่าง/บทเรียนไหนใช้มันเลย

คอมโพเนนต์นี้จะโหลดคอมโพเนนต์หัวข้อที่เหมาะสม (ในที่สุด) ฉันแค่พยายามโหลดแบบขี้เกียจสำหรับ "ไซต์ A" เป็นจุดเริ่มต้น

header-loader-component.ts

@Component({
  selector: 'header-loader',
  template: `<ng-template [ngComponentOutlet]="headerComponent | async"></ng-template>`,
  styles: []
})
export class HeaderLoaderComponent implements OnInit {

  headerComponent: Promise<Type<SiteAHeaderComponent>>;

  constructor() { }

  ngOnInit(): void {
    this.LoadHeaderComponent();
  }

  private LoadHeaderComponent() {
    if (!this.headerComponent) {
      this.headerComponent = import(`../myFolder/siteA-header/siteA-header.component`)
                       .then(({ SiteAHeaderComponent}) => SiteAHeaderComponent);
    }
  }
}

ด้วยเหตุนี้ ฉันจึงได้รับข้อผิดพลาด:

คุณสมบัติ 'headerComponent' ไม่มีตัวเริ่มต้นและไม่ได้ถูกกำหนดค่าอย่างแน่นอนในตัวสร้าง

โอเค ตอนนี้ฉันคุ้นเคยกับข้อผิดพลาดนั้นในโหมดเข้มงวดแล้ว ดังนั้นฉันจึงเปลี่ยนเป็น:

headerComponent: Promise<Type<SiteAHeaderComponent>> | null = null;

ดังนั้นมันสามารถเริ่มเป็นค่า null ก่อนที่ ngOnInit จะมีโอกาสตั้งค่าให้มันได้

ตอนนี้บน [ngComponentOutlet] ฉันได้รับ:

ประเภท 'Type | null' ไม่สามารถกำหนดค่าให้กับประเภท 'Type' ได้

ฉันจะตั้งค่าค่าให้กับ headerComponent ได้อย่างไร?

แก้ไข:
เพื่อความแน่ใจ ฉันเพิ่งลองทำสิ่งนี้โดยปิด Strict ชั่วคราวและมันทำงานได้ดีมาก

คำตอบ #1

ใช้สัญลักษณ์ ! กับคุณสมบัติเมื่อคุณกำหนดค่าให้กับมัน เช่น headerComponent!

สัญลักษณ์ ! ที่มากับชื่อคุณสมบัติหมายความว่าคุณกำลังประกาศอย่างชัดเจนว่า - "ฉันรู้ว่าคุณสมบัตินี้มีค่าไม่เป็นค่า null" และในกรณีของคุณ ถ้ามันมีค่าไม่เป็น null ค่าที่มีนั้นก็แน่นอนว่าเป็นชนิด Type

แก้ไข :
เนื่องจากคุณสมบัติ headerComponent เป็นประเภท Promise คุณต้องใช้สัญลักษณ์ ! ครอบ async pipe ในเทมเพลต เช่น (headerComponent|async)!.

นอกจากนี้ ผม/ฉันขอแนะนำให้ใช้ -

headerComponent: Promise<Type<any>> | null = null;

มิฉะนั้น คุณจะไม่สามารถตั้งค่าประเภทของส่วนหัวต่าง ๆ ในภายหลังก็ผ่านคุณสมบัติ headerComponent ได้