So implementieren Sie Dialog mithilfe der dynamischen Ladekomponentenmethode mit Angular

Dieses Mal zeige ich Ihnen, wie Sie Angular bedienen und die dynamische Ladekomponentenmethode zum Implementieren von Dialog verwenden ist ein praktischer Fall. Online-Artikel und Tutorials enden grundsätzlich, wenn die Komponente geladen wird! Gegangen? ! Und es kann nur einen Dialog geben, wenn Sie einen anderen Dialog öffnen möchten, müssen Sie zuerst den aktuell geöffneten Dialog zerstören. Nachdem ich die Implementierung des Materials gesehen habe, mache ich mir selbst die Schuld, dass ich zu dumm bin, um den Quellcode zu verstehen Eine auf meine Art. Die Dialogkomponente ist

Das Ziel der Dialogkomponente: Mehrere Dialoge können gleichzeitig existieren und der angegebene Dialog kann zerstört werden. Nach der Zerstörung verbleiben keine Komponenten im HTML Rückrufe werden bereitgestellt

Es gibt zwei Möglichkeiten, Komponenten dynamisch zu laden. Vor der Angular-Version 4.0 wurde ComponentFactoryResolver zur Implementierung verwendet. Nach 4.0 kann das bequemere ngComponentOutlet zur Implementierung verwendet werden 🎜>

Dynamisches Laden wird durch ComponentFactoryResolver erreicht

Erstens klären wir die Beziehung zwischen ViewChild, ViewChildren, ElementRef, ViewContainerRef, ViewRef, ComponentRef und ComponentFactoryResolver: ViewChild und ViewChildren

ViewChild wird über Vorlagen referenziert

Variable (#) oder Direktive (Direktive) wird verwendet, um Angular Dom abstrakte Klasse . ViewChild kann mit ElementRef oder ViewContainerRef gekapselt werden.

@ViewChild('customerRef') customerRef:ElementRef;

ViewChildren wird verwendet, um QueryList über Vorlagenreferenzvariablen oder -anweisungen zu erhalten, z. B. ein Array, das aus mehreren ViewChilds besteht.

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

ElementRef und ViewContainerRef

ViewChild kann mit ElementRef oder ViewContainerRef gekapselt werden. Was ist also der Unterschied zwischen ElementRef und ViewContainerRef?

Kapseln Sie es mit ElementRef und rufen Sie dann das native Dom-Element über .nativeElement ab.

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

ViewContainerRef: Der Container der Ansicht, einschließlich der Methode zum Erstellen der Ansicht und der API zum Betreiben der Ansicht (Die Komponente und die Vorlage sind gemeinsam definierte Ansichten). Die API gibt ComponentRef und ViewRef zurück. Was sind diese beiden?

// 使用ViewContainetRef时，请使用read声明
@ViewChild('customerRef',{read: ViewContainerRef}) customerRef:ViewContainerRef;
···
this.customerRef.createComponent(componentFactory) // componentFactory之后会提到

ViewRef und ComponentRef

ViewRef ist die kleinste UI-Einheit, die ViewContainerRef api betreibt und ViewRef erhält

ComponentRef: Hostansicht (Komponenteninstanzansicht) Durch den Verweis auf die von ViewContainerRef erstellte Komponentenansicht können Sie die Komponenteninformationen abrufen und die Methode der Komponente aufrufen

ComponentFactoryResolver

Um ComponentRef zu erhalten, müssen Sie aufrufen createComponent der ViewContainer-Methode, die Methode muss die von ComponentFactoryResolver erstellten Parameter übergeben

constructor(
 private componentFactoryResolver:ComponentFactoryResolver
) { }
viewInit(){
  componentFactory = 
   this.componentFactoryResolver.resolveComponentFactory(DialogComponent);
  // 获取对组件视图的引用，到这一步就已经完成了组件的动态加载
  componentRef = this.customerRef.createComponent(componentFactory);
  // 调用载入的组件的方法
  componentRef.instance.dialogInit(component);
}

Spezifische Implementierung

let ComponentFactory,componentRef;

@ViewChild('customerRef',{read: ViewContainerRef}) customerRef:ViewContainerRef;
constructor(
 private componentFactoryResolver:ComponentFactoryResolver
) { }
viewInit(){
 // DialogComponent:你想要动态载入的组件，customerRef：动态组件存放的容器
  componentFactory = 
   this.componentFactoryResolver.resolveComponentFactory(DialogComponent);
  componentRef = this.customerRef.createComponent(componentFactory);
}

Dynamisches Laden durch ngComponentOutlet erreichen

ngComponentOutlet reduziert die Codemenge erheblich, aber nur Versionen nach 4.0 unterstützen spezifische Implementierung

Erstellen Sie einen dynamischen Komponentenspeicherknoten in dialog.component.html

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

Übergeben Sie die Komponente (nicht den Komponentennamen) und es ist in Ordnung. Warum kann das so sein? einfach!

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

Dialogimplementierung

Die Idee der Implementierung ist wie folgt: Erstellen Sie zunächst eine Dialogkomponente, um andere Komponenten zu hosten, und erstellen Sie dann eine Maske für Dialogabdeckung und Animation, erstellen Sie einen Dienst, um die Generierung und Zerstörung des Dialogs zu steuern, aber der Dienst generiert nur den Dialog, die Komponenten im Dialog müssen noch in der Dialogkomponente generiert werden 1 . Schreiben Sie zuerst einen öffentlichen Dienst, um die viewContainerRef der Stammkomponente abzurufen (ich habe versucht, mit ApplicationRef die viewContainerRef der Stammkomponente abzurufen, aber es ist fehlgeschlagen, also habe ich ihn als Dienst geschrieben)

gerRootNode(...rootNodeViewContainerRef){
  if(rootNode){
   return rootNode;
  }else {
   rootNode = rootNodeViewContainerRef[0];
  };
}
// 然后再根组件.ts内调用
this.fn.gerRootNode(this.viewcontainerRef);

2. ts, definieren Sie drei Methoden zum Öffnen und Schließen und erstellen Sie sie mit ViewContainerRef. Bevor Sie die Dialogkomponente erstellen, müssen Sie ComponentFactoryReslover aufrufen und DialogComponent an

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 übergeben um es zu implementieren (ngComponentOutlet wird unten erwähnt. Der Einfachheit halber wird es direkt verwendet. )

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、这里还创建了一个 DialogRef 的类，用来处理 dialog 关闭后的回调，这样就可以使用 XX.afterClose().subscribe() 来创建回调的方法了

@Injectable()
export class DialogRef{
 public afterClose$ = new Subject();
 constructor(){}
 close(){
  this.afterClose$.next();
  this.afterClose$.complete();
 }
 afterClose(){
  return this.afterClose$.asObservable();
 }
}

创建和销毁dialog

// 创建
let _viewRef = this.dialogService.open(DialogTestComponent);
_viewRef.afterClose().subscribe(()=>{
  console.log('hi');
});
// 销毁
this.dialogService.close()

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

怎样操作Node.js 使用jade模板引擎

Node.js Express安装与使用详细介绍

Das obige ist der detaillierte Inhalt vonSo implementieren Sie Dialog mithilfe der dynamischen Ladekomponentenmethode mit Angular. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!