Detailed explanation of Angular NgTemplateOutlet

This directive is used toTemplateRef Object, insert the corresponding embedded view. When applying the NgTemplateOutlet directive, we can pass[ngTemplateOutletContext] Properties to setEmbeddedViewRef context object. The bound context should be an object, and can be usedlet Syntax to declare the binding context object attribute name.

Friendly tips: If the let syntax does not bind any attribute name, the corresponding value of the $implicit attribute in the context object will be used as the default value.

NgTemplateOutlet instruction syntax

NgTemplateOutlet usage example

@Component({
 selector: 'ng-template-outlet-example',
 template: `
 <ng-container *ngTemplateOutlet="greet"></ng-container>
 <hr>
 <ng-container *ngTemplateOutlet="eng; context: myContext"></ng-container>
 <hr>
 <ng-container *ngTemplateOutlet="svk; context: myContext"></ng-container>
 <hr>
 <ng-template #greet><span>Hello</span></ng-template>
 <ng-template #eng let-name><span>Hello {{name}}!</span></ng-template>
 <ng-template #svk let-person="localSk"><span>Ahoj {{person}}!</span></ng-template>
`
})
class NgTemplateOutletExample {
 myContext = {$implicit: 'World', localSk: 'Svet'};
}

Basic knowledge

TemplateRef

The TemplateRef instance is used to represent template objects.

ViewContainerRef

The ViewContainerRef instance provides createEmbeddedView() method, this method receivesTemplateRef The object is used as a parameter and the contents in the template are inserted into the page as sibling elements of the container (comment element).

<ng-template>

<ng-template> is used to define templates, using* Syntax sugar structure instructions will eventually be converted into<ng-template> Template directives. If the contents in the template are not processed, they will not be displayed on the page.

<ng-container>

<ng-container> is a logical container that can be used to group nodes, but not as a node in the DOM tree. It will be rendered as a comment element in HTML, which can be used to avoid adding additional elements to use structural directives.

If you want to know more <ng-template> and<ng-container>Please refer to the differenceAngular dynamically creates componentsI have something to say in the article.

NgTemplateOutlet Source Code Analysis

NgTemplateOutlet Directive Definition

@Directive({
 selector: '[ngTemplateOutlet]'
})

NgTemplateOutlet class private properties and constructor

export class NgTemplateOutlet implements OnChanges {
 // Indicates the created embedded view private _viewRef: EmbeddedViewRef<any>; 
 // Inject ViewContainerRef instance constructor(private _viewContainerRef: ViewContainerRef) {}
}

NgTemplateOutlet class input properties

@Input() public ngTemplateOutletContext: Object; // Used to set EmbeddedViewRef context@Input() public ngTemplateOutlet: TemplateRef<any>; // Used to set the TemplateRef object

NgTemplateOutlet instruction declaration cycle

export class NgTemplateOutlet implements OnChanges {
 ngOnChanges(changes: SimpleChanges) {
 // If this._viewRef already exists, first remove the view from the corresponding position in the view container. if (this._viewRef) {
  this._viewContainerRef.remove(this._viewContainerRef.indexOf(this._viewRef));
 }
 // If the input attribute has a TemplateRef object bound, create an embedded view based on the set context object. if () {
  this._viewRef = this._viewContainerRef.createEmbeddedView(
   , );
 }
 }
}

ngTemplateOutlet The source code of the instruction is relatively simple, if readers are interested in understanding itcreateEmbeddedView() The internal implementation of the method can be used as a referenceAngular NgIf Related content in the article.

Also, it is important to note that the uselet Syntax creates template local variables. If the bound value is not set, the default is in the context object. $implicit The value corresponding to the attribute. Why is the attribute name $implicit Woolen cloth? Because Angular does not know how the user will name it, it defines a default attribute name. Right now let-name="$implicit" and let-name It's equivalent.

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.