一、理解angular組件
組件是一種特殊的指令,使用更簡單的配置項來構建基于組件的應用程序架構,這樣他能簡單地寫app,通過類似的web Component 或者angular2的樣式。web Component 是一個規范。馬上就要成為標準。
應用組件的優點:
不用組建的情況:
二、動態創建組件
說了這么多,先來個例子吧。
上面那張圖很簡單就是一個輸入文本的一個彈框。
下面這個就有點復雜了,有數據傳入,事件綁定等
主了調用起來方便,我把這些都封裝成了一個方法:三個參數
Utility.$ShowDialogComponent('ComponentName', { Params1,Params2... }, { onEventName1:()=>{}, ... });
由于我動態創建的組件都是以彈框形式出來,所以我把動態創建的步驟放到了,彈框組件里。
創建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 {} .... }
就不把代碼張貼里了,查看全部代碼可以點擊這里展示出幾個方法吧,具體詳情可能點擊
總結
聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com