Angular4動態創建組件--根據組件名稱動態創建出來組件

轉載: Angular4動態創建組件--根據組件名稱動態創建出來組件

動態創建組件

• 說說場景先，比我寫了一些組件，這此組件內容都很少，彈出的對話框也許只有一行數據，也有可能是一個表單等，或都一些多選的，單選的選項等。

• 網上有好多，動態創建組件的Demo，都不是很滿意，願意就是要動態創建組件的時候，傳入的你即將要創建的組件對象進去，然後把這個放到頁面裏顯示出來。這算什麼動態創建呀，我就想傳一個組件的名字，然後就能把他創建出來。

• 之前寫過C#動態創建類，都是給一個類的名稱，然後通過反射將類創建出來，然後能過接口過濾轉成接口調用方法或， invoke 某個方法等進行操作。像這種纔是我想要的效果。

• 給個名稱，然後就把這個組件創建出來，通過輸入一些參數對創建出來的組件進行賦值，輸出一些參數（主就輸出是事件了，比較點擊組件上的按鈕觸發相應的事件等）。

說了這麼多，先來個例子吧。 
 
上面那張圖很簡單就是一個輸入文本的一個彈框。

下面這個就有點複雜了，有數據傳入，事件綁定等 

主了調用起來方便，我把這些都封裝成了一個方法：三個參數

• 要創建的組件名稱
• 要傳入組件的參數
• 組件輸出的事件

   Utility.$ShowDialogComponent('ComponentName', {
      Params1,Params2...
    }, {
       onEventName1:()=>{},
       ...
    });

• 1
• 2
• 3
• 4
• 5
• 6

• 1
• 2
• 3
• 4
• 5
• 6

由於我動態創建的組件都是以彈框形式出來，所以我把動態創建的步驟放到了，彈框組件裏。

創建Dialog.ts，文件，

@Component({
  selector: 'xtn-mode-dialog',
  templateUrl: './Dialog.html',
  styleUrls: ['./Dialog.scss'],
  animations: [  // 彈框的添加一個動畫效果，由小到大顯示，關閉時候，由大小到最後不見了。
    trigger('TriggerState', [
      state('inactive', style({ transform: 'scale(0.1)' })),
      state('active', style({ transform: 'scale(1)' })),
      transition('inactive => active', animate('150ms ease-in')),
      transition('active => inactive', animate('150ms ease-out')),
    ])
  ]
})
export class XtnDialog implements OnInit, OnDestroy, OnChanges, AfterContentChecked, AfterContentInit {
   // 依賴注入動態創建組件的工廠類
   constructor(private resolver: ComponentFactoryResolver) {
   }
   // 內容檢查，主要是判斷是打開還是關閉彈框。
   ngAfterContentChecked(): void {}
   // 銷燬操作
   ngOnDestroy(): void {}
   // 這裏就是動態創建的組件地方法
   LoadComponent(self:any){}
   ngAfterContentInit(): void {}
   ....
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27

就不把代碼張貼裏了，查看全部代碼可以點擊這裏展示出幾個方法吧，具體詳情可能點擊