這篇文章將為大家詳細講解有關怎么在Angular中使用Dialog動態(tài)加載組件，文章內容質量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關知識有一定的了解。

成都創(chuàng)新互聯(lián)主要為客戶提供服務項目涵蓋了網頁視覺設計、VI標志設計、全網整合營銷推廣、網站程序開發(fā)、HTML5響應式網站建設、手機網站制作、微商城、網站托管及成都網站維護公司、WEB系統(tǒng)開發(fā)、域名注冊、國內外服務器租用、視頻、平面設計、SEO優(yōu)化排名。設計、前端、后端三個建站步驟的完善服務體系。一人跟蹤測試的建站服務標準。已經為陽光房行業(yè)客戶提供了網站建設服務。

動態(tài)加載組件的實現(xiàn)方式有兩種，angular4.0版本之前使用ComponentFactoryResolver來實現(xiàn)，4.0之后可以使用更便捷的ngComponentOutlet來實現(xiàn)，

通過ComponentFactoryResolver實現(xiàn)動態(tài)載入

首先理一下ViewChild、ViewChildren、ElementRef、ViewContainerRef、ViewRef、ComponentRef、ComponentFactoryResolver之間的關系：

ViewChild 與 ViewChildren

ViewChild是通過模板引用變量（#）或者指令（directive）用來獲取 Angular Dom 抽象類，ViewChild可以使用 ElementRef 或者 ViewContainerRef 進行封裝。

@ViewChild('customerRef') customerRef:ElementRef;

ViewChildren通過模板引用變量或者指令用來獲取QueryList，像是多個ViewChild組成的數(shù)組。

@ViewChildren(ChildDirective) viewChildren: QueryList<ChildDirective>;

ElementRef 與 ViewContainerRef

ViewChild可以使用 ElementRef 或者 ViewContainerRef 進行封裝，那么 ElementRef 和 ViewContainerRef 的區(qū)別是什么？

用 ElementRef 進行封裝，然后通過 .nativeElement 來獲取原生Dom元素

console.log(this.customerRef.nativeElement.outerHTML);

ViewContainerRef ：視圖的容器，包含創(chuàng)建視圖的方法和操作視圖的api（組件與模板共同定義了視圖）。api會返回 ComponentRef 與 ViewRef，那么這兩個又是什么？

// 使用ViewContainetRef時，請使用read聲明
@ViewChild('customerRef',{read: ViewContainerRef}) customerRef:ViewContainerRef;
···
this.customerRef.createComponent(componentFactory) // componentFactory之后會提到

ViewRef 與 ComponentRef

ViewRef 是最小的UI單元，ViewContainerRef api操作和獲取的就是ViewRef

ComponentRef：宿主視圖（組件實例視圖）通過 ViewContainerRef 創(chuàng)建的對組件視圖的引用，可以獲取組件的信息并調用組件的方法

ComponentFactoryResolver

要獲取 ComponentRef ，需要調用 ViewContainer 的 createComponent 方法，方法需要傳入ComponentFactoryResolver創(chuàng)建的參數(shù)

constructor(
 private componentFactoryResolver:ComponentFactoryResolver
) { }

viewInit(){
  componentFactory = 
   this.componentFactoryResolver.resolveComponentFactory(DialogComponent);
  // 獲取對組件視圖的引用，到這一步就已經完成了組件的動態(tài)加載
  componentRef = this.customerRef.createComponent(componentFactory);
  // 調用載入的組件的方法
  componentRef.instance.dialogInit(component);
}

具體實現(xiàn)

let componentFactory,componentRef;

@ViewChild('customerRef',{read: ViewContainerRef}) customerRef:ViewContainerRef;
constructor(
 private componentFactoryResolver:ComponentFactoryResolver
) { }

viewInit(){
 // DialogComponent:你想要動態(tài)載入的組件，customerRef：動態(tài)組件存放的容器
  componentFactory = 
   this.componentFactoryResolver.resolveComponentFactory(DialogComponent);
  componentRef = this.customerRef.createComponent(componentFactory);
}

通過ngComponentOutlet實現(xiàn)動態(tài)載入

ngComponentOutlet 大大縮減了代碼量，但是只有帶4.0之后的版本才支持

具體實現(xiàn)

在dialog.component.html建立動態(tài)組件存放節(jié)點

<ng-container *ngComponentOutlet="componentName"></ng-container>

將組件（不是組件名稱）傳入，就OK了，為什么可以這么簡單！

dialogInit(component){
  this.componentName = component;
};

Dialog的實現(xiàn)

實現(xiàn)的思路是這樣的：首先創(chuàng)建一個dialog組件用來承載其他組件，為dialog創(chuàng)建遮罩和動畫，建立一個service來控制dialog的生成和銷毀，不過service只生成dialog，dialog內的組件還是需要在dialog組件內進行生成

1、首先寫一個公共的service，用來獲取根組件的viewContainerRef（嘗試過 ApplicationRef 獲取根組件的 viewContainerRef 沒成功，所以就寫成service了）

gerRootNode(...rootNodeViewContainerRef){
  if(rootNode){
   return rootNode;
  }else {
   rootNode = rootNodeViewContainerRef[0];
  };
}

// 然后再根組件.ts內調用
this.fn.gerRootNode(this.viewcontainerRef);

2、創(chuàng)建dialog.service.ts，定義open、close三個方法，使用ViewContainerRef創(chuàng)建dialog組件，創(chuàng)建之前需要調用 ComponentFactoryReslover，并將DialogComponent傳入

let componentFactory;
let componentRef;

@Injectable()
export class DialogService {
 constructor(
    private componentFactoryResolver:ComponentFactoryResolver
    private fn:FnService
  ) { }   

 open(component){
  componentFactory = 
   this.componentFactoryResolver.resolveComponentFactory(DialogComponent);
  
  // 這里的獲取的是ComponentRef
  containerRef = this.fn.gerRootNode().createComponent(componentFactory); 
  
  // 將containerRef存儲下來，以便之后的銷毀
  containerRefArray.push(containerRef);
  
  // 調用了組件內的初始化方法，后面會提到
  return containerRef.instance.dialogInit(component,containerRef);
 }

  // 這里有兩種情況，一種是在當前組件和dialog組件關閉調用的，因為有返回值所以可以關閉指定的dialog；還有一種是在插入到dialog組件內的組件調用的，因為不知道父組件的信息，所以默認關閉最后一個dialog
 close(_containerRef=null){
  if( _containerRef ){
   return _containerRef.containerRef.instance.dialogDestory();
  }else{
   containerRefArray.splice(-1,1)[0].instance.dialogDestory();
  }
 }

}

3、dialog.component.ts，這里使用 ngComponentOutlet 來實現(xiàn)（ngComponentOutlet 在下面提到，這里為了偷懶，直接拿來用了）

let containerRef,dialogRef = new DialogRef();

export class DialogComponent implements OnInit {

 componentName;
 constructor(
  private fn:FnService
 ) { }

 dialogInit( _component, _containerRef){
  this.componentName = _component;
  containerRef = _containerRef;
  dialogRef['containerRef'] = containerRef;
  return dialogRef;
 };

 dialogDestory(){
  let rootNode = this.fn.gerRootNode();
  // 等待動畫結束再移除
  setTimeout(()=>{
  // 這里用到了 viewContainerRef 里的indexOf 和 remove 方法
   rootNode.remove(rootNode.indexOf(containerRef.hostView));
  },400);
  dialogRef.close();
  return true;
 };
 
}

4、這里還創(chuàng)建了一個 DialogRef 的類，用來處理 dialog 關閉后的回調，這樣就可以使用 XX.afterClose().subscribe() 來創(chuàng)建回調的方法了

@Injectable()
export class DialogRef{

 public afterClose$ = new Subject();
 constructor(){}

 close(){
  this.afterClose$.next();
  this.afterClose$.complete();
 }

 afterClose(){
  return this.afterClose$.asObservable();
 }

}

創(chuàng)建和銷毀dialog

// 創(chuàng)建
let _viewRef = this.dialogService.open(DialogTestComponent);
_viewRef.afterClose().subscribe(()=>{
  console.log('hi');
});

// 銷毀
this.dialogService.close()

關于怎么在Angular中使用Dialog動態(tài)加載組件就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

網頁題目：怎么在Angular中使用Dialog動態(tài)加載組件-創(chuàng)新互聯(lián)
標題網址：http://newbst.com/article40/dggcho.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供建站公司、用戶體驗、域名注冊、自適應網站、標簽優(yōu)化、云服務器

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)