Detailed explanation of Angular dynamic components

Usage scenarios

Let's first clarify the usage scenarios of dynamic components. To dynamically load components when the code is running, in layman's terms, the code needs to determine where to load certain components based on specific circumstances (such as user operations, requesting results from the backend). These components are not static (not fixed).

The example given on the official website is that when building a dynamic advertising banner, new advertising components will be continuously launched, and it is obviously unrealistic to use a template that only supports static component structures.

Let's take another common example, the dynamic pop-up box. The components that pop up are uncertain and constantly updated. A purchase box pops up here and there, and a style selection box pops up there. The static component structure template cannot meet the growing needs of the masses.

How to achieve it

Then we'll get a handle on what's needed to implement dynamic components.

1. Where to place dynamic components

We need to know where to add the dynamic component, which is the anchor point. So what can be used to load components?

You might be thinking, isn't the component loaded on the anchor? Isn't the anchor a DOM node? Of course, it is loaded into the DOM node.

Let's first review the common methods of Angular operating DOM. Don't think about the native JS method of operating DOM. Do you think it can return to you an object that can load Angular components?

Angular provides a technology called DOM Query, which mainly comes from the @ViewChild and @ViewChildren decorators, which have the same basic functions.

@ViewChild: Returns a single reference to the first element or directive in the view's DOM that matches the selector.

@ViewChildren : Returns multiple references wrapped by a QueryList object, searching the view's DOM for all elements or directives that match the selector.

Basic syntax:

@ViewChild([reference from template], {read: [reference type]});

The objects found by DOM Query technology are divided into three categories:

ElementRef: if it is mounted on a simple html element like span;

TemplateRef: if it is mounted on a template element;

ViewContainerRef: cannot be inferred, usually the programmer needs to specify it in read, any DOM element can be used as a view container.

We can see from the official website API that only ViewContainerRef is a container that can attach one or more views to a component, that is, only it can load a component. However, it should be noted that it is a DOM element (container) that can treat new components as its siblings (nodes). It is a brother, not a parent-child relationship.

OK, we have determined that ViewContainerRef is used to load the container. There are two ways to obtain ViewContainerRef:

The first one is to query @ViewChild through DOM Query above

<ng-container #addComp></ng-container>
@ViewChild('addComp', {read: ViewContainerRef}) adComp:ViewContainerRef;

The second is the example in the official website, using dependency injection

import { Directive, ViewContainerRef } from '@angular/core';

@Directive({
selector: '[ad-host]',
})
export class AdDirective {
constructor(public viewContainerRef: ViewContainerRef) { }
}

The anchor point is set on ng-template, and the ViewContainerRef is obtained through directive injection

template: `
<div class="ad-banner-example">
<h3>Advertisements</h3>
<ng-template ad-host></ng-template>
</div>

2. How to get the instance of the component

Loading a component into a view is not as simple as instantiating it with a new method and then attaching it with append, insert, etc. Dynamic components need to be compiled and stored by the compiler in advance, and then encapsulated with ComponentFactory. Subsequent Component instances must be created through ComponentFactory. You can read this article [Translation] What you need to know about Angular dynamic components, but it mentions that the SystemJsNgModuleLoader module loader has been deprecated.

ComponentFactoryResolver is a simple registry that maps Components to generated classes that a ComponentFactory can use to create component instances. It can be used to obtain a factory for a given component type and then create a component of that type using the factory's create() method.

Let's take a look at the official website example code. The following is not the complete code

//Inject ComponentFactoryResolver
constructor(private componentFactoryResolver: ComponentFactoryResolver) { }
 
loadComponent() {
......
// Get the generated ComponentFactory that can be used to create an ad component instance
const componentFactory = this.componentFactoryResolver.resolveComponentFactory(adItem.component);
 
//Get the container for loading components const viewContainerRef = this.adHost.viewContainerRef;
viewContainerRef.clear();
 
//Put the component in the container and pass some parameters to it const componentRef = viewContainerRef.createComponent(componentFactory);
(<AdComponent>componentRef.instance).data = adItem.data;
}

Do you think that's the end? Do you think the code written in this way can run? Too young, let the front wave tell you a few points to pay attention to:

Components, directives, and pipes in Angular are all encapsulated in modules. Taking components as an example, if you want to use components from other modules, the other modules must export this component, and you must also import other modules in your own module. So remember to import and export the instructions in the official website examples.

If it is a dynamic component, you must register the component in the entryComponents property of the module, but you don’t need to export it. You still need to import the module.

The above is the detailed explanation of Angular dynamic components. For more information about Angular dynamic components, please pay attention to other related articles on 123WORDPRESS.COM!