Web Front-end
JS Tutorial
How to use Angular to implement Dialog using dynamic loading component method
How to use Angular to implement Dialog using dynamic loading component method
This time I will show you how to operate Angular and use the dynamic loading component method to implement Dialog. How to operate Angular and use the dynamic loading component method to implement Dialog. What are the precautions?The following is a practical case, let’s take a look .
The articles and tutorials on the Internet basically stop after the component is loaded! Gone? ! And there can only be one dialog. If you want to open another dialog, you must first destroy the currently opened dialog. After seeing the implementation of material, I blame myself for being too stupid to understand the source code, so I can only implement it in my own way. The dialog component is
The goal of the Dialog component: multiple Dialogs can exist at the same time, and the specified Dialog can be destroyed. After destruction, no components remain in the HTML and callbacks are provided.
There are two ways to implement dynamic loading of components. Before version 4.0 of angular, ComponentFactoryResolver was used to implement it. After 4.0, the more convenient ngComponentOutlet can be used to implement it.
Dynamic loading is achieved through ComponentFactoryResolver
First sort out the relationship between ViewChild, ViewChildren, ElementRef, ViewContainerRef, ViewRef, ComponentRef, and ComponentFactoryResolver:
ViewChild and ViewChildren
ViewChild is referenced through the template Variable (#) or directive (directive) is used to obtain Angular Dom Abstract class, ViewChild can be encapsulated using ElementRef or ViewContainerRef.
@ViewChild('customerRef') customerRef:ElementRef;ViewChildren is used to obtain QueryList through template reference variables or instructions, such as an array composed of multiple ViewChilds.
@ViewChildren(ChildDirective) viewChildren: QueryList<ChildDirective>;
ElementRef and ViewContainerRef
ViewChild can be encapsulated using ElementRef or ViewContainerRef. So what is the difference between ElementRef and ViewContainerRef?
Encapsulate with ElementRef, and then obtain the native Dom element through .nativeElement
console.log(this.customerRef.nativeElement.outerHTML);
ViewContainerRef: the container of the view, including the method of creating the view and the API for operating the view (the component and the template are jointly defined view). The api will return ComponentRef and ViewRef, so what are these two?
// 使用ViewContainetRef时，请使用read声明
@ViewChild('customerRef',{read: ViewContainerRef}) customerRef:ViewContainerRef;
···
this.customerRef.createComponent(componentFactory) // componentFactory之后会提到ViewRef and ComponentRef
ViewRef is the smallest UI unit. ViewContainerRef api operates and obtains ViewRef
ComponentRef: host view (component instance View) Through the reference to the component view created by ViewContainerRef, you can obtain the component information and call the component's method
ComponentFactoryResolver
To obtain the ComponentRef, you need to call createComponent of ViewContainer Method, the method needs to pass in the parameters created by ComponentFactoryResolver
constructor(
private componentFactoryResolver:ComponentFactoryResolver
) { }
viewInit(){
componentFactory =
this.componentFactoryResolver.resolveComponentFactory(DialogComponent);
// 获取对组件视图的引用，到这一步就已经完成了组件的动态加载
componentRef = this.customerRef.createComponent(componentFactory);
// 调用载入的组件的方法
componentRef.instance.dialogInit(component);
}Specific implementation
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);
}Achieve dynamic loading through ngComponentOutlet
ngComponentOutlet greatly reduces the amount of code, but only versions after 4.0 are supported
Specific implementation
Create a dynamic component storage node in dialog.component.html
<ng-container *ngComponentOutlet="componentName"></ng-container>
Pass in the component (not the component name) and it will be OK. Why can it be so simple!
dialogInit(component){
this.componentName = component;
};Dialog implementation
The implementation idea is as follows: first create a dialog component to host other components, and create a mask for the dialog. Cover and animation, create a service to control the generation and destruction of dialog, but the service only generates dialog, the components in the dialog still need to be generated in the dialog component
1. First, write a public service to Get the viewContainerRef of the root component (I tried ApplicationRef to get the viewContainerRef of the root component but failed, so I wrote it as service)
gerRootNode(...rootNodeViewContainerRef){
if(rootNode){
return rootNode;
}else {
rootNode = rootNodeViewContainerRef[0];
};
}
// 然后再根组件.ts内调用
this.fn.gerRootNode(this.viewcontainerRef);2. Create dialog.service.ts, define three methods of open and close, and create it using ViewContainerRef Before creating the dialog component, you need to call ComponentFactoryReslover and pass the DialogComponent into
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. Here, ngComponentOutlet is used to implement it (ngComponentOutlet is mentioned below. For the sake of laziness, it is used directly. )
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中文网其它相关文章！
推荐阅读：
The above is the detailed content of How to use Angular to implement Dialog using dynamic loading component method. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
How to use mdf and mds files
Feb 19, 2024 pm 05:36 PM
How to use mdf files and mds files With the continuous advancement of computer technology, we can store and share data in a variety of ways. In the field of digital media, we often encounter some special file formats. In this article, we will discuss a common file format - mdf and mds files, and introduce how to use them. First, we need to understand the meaning of mdf files and mds files. mdf is the extension of the CD/DVD image file, and the mds file is the metadata file of the mdf file.
What software is crystaldiskmark? -How to use crystaldiskmark?
Mar 18, 2024 pm 02:58 PM
CrystalDiskMark is a small HDD benchmark tool for hard drives that quickly measures sequential and random read/write speeds. Next, let the editor introduce CrystalDiskMark to you and how to use crystaldiskmark~ 1. Introduction to CrystalDiskMark CrystalDiskMark is a widely used disk performance testing tool used to evaluate the read and write speed and performance of mechanical hard drives and solid-state drives (SSD). Random I/O performance. It is a free Windows application and provides a user-friendly interface and various test modes to evaluate different aspects of hard drive performance and is widely used in hardware reviews
Convert VirtualBox fixed disk to dynamic disk and vice versa
Mar 25, 2024 am 09:36 AM
When creating a virtual machine, you will be asked to select a disk type, you can select fixed disk or dynamic disk. What if you choose fixed disks and later realize you need dynamic disks, or vice versa? Good! You can convert one to the other. In this post, we will see how to convert VirtualBox fixed disk to dynamic disk and vice versa. A dynamic disk is a virtual hard disk that initially has a small size and grows in size as you store data in the virtual machine. Dynamic disks are very efficient at saving storage space because they only take up as much host storage space as needed. However, as disk capacity expands, your computer's performance may be slightly affected. Fixed disks and dynamic disks are commonly used in virtual machines
How to download foobar2000? -How to use foobar2000
Mar 18, 2024 am 10:58 AM
foobar2000 is a software that can listen to music resources at any time. It brings you all kinds of music with lossless sound quality. The enhanced version of the music player allows you to get a more comprehensive and comfortable music experience. Its design concept is to play the advanced audio on the computer The device is transplanted to mobile phones to provide a more convenient and efficient music playback experience. The interface design is simple, clear and easy to use. It adopts a minimalist design style without too many decorations and cumbersome operations to get started quickly. It also supports a variety of skins and Theme, personalize settings according to your own preferences, and create an exclusive music player that supports the playback of multiple audio formats. It also supports the audio gain function to adjust the volume according to your own hearing conditions to avoid hearing damage caused by excessive volume. Next, let me help you
How to use Baidu Netdisk app
Mar 27, 2024 pm 06:46 PM
Cloud storage has become an indispensable part of our daily life and work nowadays. As one of the leading cloud storage services in China, Baidu Netdisk has won the favor of a large number of users with its powerful storage functions, efficient transmission speed and convenient operation experience. And whether you want to back up important files, share information, watch videos online, or listen to music, Baidu Cloud Disk can meet your needs. However, many users may not understand the specific use method of Baidu Netdisk app, so this tutorial will introduce in detail how to use Baidu Netdisk app. Users who are still confused can follow this article to learn more. ! How to use Baidu Cloud Network Disk: 1. Installation First, when downloading and installing Baidu Cloud software, please select the custom installation option.
How to use NetEase Mailbox Master
Mar 27, 2024 pm 05:32 PM
NetEase Mailbox, as an email address widely used by Chinese netizens, has always won the trust of users with its stable and efficient services. NetEase Mailbox Master is an email software specially created for mobile phone users. It greatly simplifies the process of sending and receiving emails and makes our email processing more convenient. So how to use NetEase Mailbox Master, and what specific functions it has. Below, the editor of this site will give you a detailed introduction, hoping to help you! First, you can search and download the NetEase Mailbox Master app in the mobile app store. Search for "NetEase Mailbox Master" in App Store or Baidu Mobile Assistant, and then follow the prompts to install it. After the download and installation is completed, we open the NetEase email account and log in. The login interface is as shown below
BTCC tutorial: How to bind and use MetaMask wallet on BTCC exchange?
Apr 26, 2024 am 09:40 AM
MetaMask (also called Little Fox Wallet in Chinese) is a free and well-received encryption wallet software. Currently, BTCC supports binding to the MetaMask wallet. After binding, you can use the MetaMask wallet to quickly log in, store value, buy coins, etc., and you can also get 20 USDT trial bonus for the first time binding. In the BTCCMetaMask wallet tutorial, we will introduce in detail how to register and use MetaMask, and how to bind and use the Little Fox wallet in BTCC. What is MetaMask wallet? With over 30 million users, MetaMask Little Fox Wallet is one of the most popular cryptocurrency wallets today. It is free to use and can be installed on the network as an extension
How to install Angular on Ubuntu 24.04
Mar 23, 2024 pm 12:20 PM
Angular.js is a freely accessible JavaScript platform for creating dynamic applications. It allows you to express various aspects of your application quickly and clearly by extending the syntax of HTML as a template language. Angular.js provides a range of tools to help you write, update and test your code. Additionally, it provides many features such as routing and form management. This guide will discuss how to install Angular on Ubuntu24. First, you need to install Node.js. Node.js is a JavaScript running environment based on the ChromeV8 engine that allows you to run JavaScript code on the server side. To be in Ub
