Angular 4.x NgTemplateOutlet and ngtemplateoutlet

Angular 4.x NgTemplateOutlet and ngtemplateoutlet

This command is used based on the existingTemplateRef Object, insert the corresponding embedded view. When the NgTemplateOutlet command is applied[ngTemplateOutletContext] Attribute to setEmbeddedViewRef . The bound context should be an object.let Syntax to declare the property name of the bound context object.

Tip: If the let syntax is not bound to any attribute name, the $ implicit attribute in the context object is used as the default value.

NgTemplateOutlet command syntax

Copy codeThe Code is as follows:
<Ng-container * ngTemplateOutlet = "templateRefExp; context: contextExp"> </ng-container>

NgTemplateOutlet example

@Component({ selector: 'ng-template-outlet-example', template: ` <ng-container *ngTemplateOutlet="greet"></ng-container> 
Basic knowledge

TemplateRef

A TemplateRef instance is used to represent a template object.
ViewContainerRef

The ViewContainerRef instance provides createEmbeddedView() Method, which receivesTemplateRef The object is used as a parameter, and the content in the template is inserted into the page as the sibling element of the container (comment element.

<Ng-template>

<Ng-template> used to define a template.* Structure commands of syntactic sugar will eventually be converted<ng-template> Template instructions. If the content in the template is not processed, it is not displayed on the page.
<Ng-container>

<Ng-container> is a logical container that can be used to group nodes, but is not used as a node in the DOM tree. It is rendered as a comment element in HTML, it can be used to avoid adding additional elements to use structure commands.
To learn more<Ng-template>And<Ng-container>For details about the differences, see what I have to say in Angular 4.x dynamic component creation Article.
NgTemplateOutlet source code analysis

NgTemplateOutlet command Definition

@Directive({ selector: '[ngTemplateOutlet]'})
NgTemplateOutlet class private attributes 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 attributes

@ Input () public ngTemplateOutletContext: Object; // used to set the EmbeddedViewRef context @ Input () public ngTemplateOutlet: TemplateRef <any>; // used to set the TemplateRef Object
NgTemplateOutlet command declaration cycle

Export class NgTemplateOutlet implements OnChanges {ngOnChanges (changes: SimpleChanges) {// if this. _ viewRef already exists, remove the view from the corresponding position in the view container. If (this. _ viewRef) {this. _ viewContainerRef. remove (this. _ viewContainerRef. indexOf (this. _ viewRef);} // if this. if the ngTemplateOutlet INPUT attribute is bound to a TemplateRef object, an embedded view if (this. ngTemplateOutlet) {this. _ viewRef = this. _ viewContainerRef. createEmbeddedView (this. ngTemplateOutlet, this. ngTemplateOutletContext );}}}
ngTemplateOutlet The command source code is relatively simple. If you are interestedcreateEmbeddedView() For more information about the internal implementation of the method, see Angular 4.x NgIf.
Note thatlet Syntax to create template local variables. If no bound value is set, the default value is $implicit The value corresponding to the property. Why is the attribute name $implicit What about it? Angular defines a default attribute name because it does not know how the user will name it. That is let-name="$implicit" And let-name Is equivalent.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.