某工程師的開發日常

在 上一篇文章 中，我們使用ComponentFactoryResolver動態產生Component。 今天我們來介紹ngComponentOutlet這個Directive，它的使用方式比ComponentFactoryResolver簡單許多，可以更輕鬆容易地達成動態產生Component的工作。 ngComponentOutlet的使用方式如下: <ng-container *ngComponentOutlet="YourComponentType; injector: YourInjector; content: YourContent; ngModuleFactory: YourModuleFactory;"> </ng-container> ※除了指定嵌入的Component Type，還有其他Input 選項，如injector 、content、ngModuleFactory。 ※injector : 當Component 需要使用到服務時，需配合ReflectiveInjector做注入的動作。 ※content : 當Component有用到<ng-content>時，這個欄位可以被用來插入要顯示在<ng-content> 的內容。 ※ngModuleFactory : 當Component 來自其他Module 時，需配合NgModuleFactory和Compiler做載入的動作。 如果我們拿 上一篇文章 的例子以ngComponentOutlet來改寫的話會變成這樣: <div *ngFor="let note of NoteComponents"> <ng-container *ngComponentOutlet="note"> </ng-container> </div> 看起來是不是比ComponentFactoryResolver還要更加簡潔和簡單!! 另外，如果我們今天要嵌入的是一個Template而不是Component ，那

在 上一篇文章 中，我們使用Reactive Form動態產生表單欄位，但有時候我們難免也會遇到需要動態產生Component的需求。舉例來說，各位如果有用過Google Keep，它的每一個Note就是一個獨立的Component，當每次想要新增一個Note，勢必需要以動態的方式來產生Note Component。 這次我們以Note例子示範使用ComponentFactoryResolver動態產生Component，其重點流程如下: 1. 新增Note Component，並且在NgModule裡面加入entryComponents: [NoteComponent]。 import { Component, OnInit} from '@angular/core'; import { FormGroup, FormControl} from '@angular/forms'; @Component({ selector: 'app-note', templateUrl: './note.component.html', styleUrls: ['./note.component.css'] }) export class NoteComponent implements OnInit { Form: FormGroup; NoteID: number; constructor( ) { } ngOnInit() { this.InitForm(); } InitForm(): void { this.Form = new FormGroup({ Title: new FormControl(null), Content: new FormControl(null) }); } } <div class="col-sm-12"> <div class="card"> <div class="card-header font-weight-bold text-white bg-info&q