1. <ng-template> element
import { Component, TemplateRef, ViewContainerRef, ViewChild,
AfterViewInit } from '@angular/core';
@Component({
selector: 'app-code404',
template: `
<!-- Use a template variable here，Use in components@ViewChildDecorator gets template elements-->
<ng-template #tpl>
Big Keriy !
</ng-template>
`,
})
export class Code404Component implements AfterViewInit{
// @ViewChild Decorator Gets Template Element @ViewChild('tpl')
tplRef: TemplateRef<any>;
constructor(private vcRef: ViewContainerRef) {}
ngAfterViewInit() {
// Create an embedded view using the createEmbeddedView method of the ViewContainerRef object. ();
} }
In this way, we actually get something in the view...ah, it's a 'Big Keriy!' string.
2. ngTemplateOutlet directive
a. ngTemplateOutlet
It is the same as routerOutlet, put the view (the content in the <ng-template> tag) under the corresponding ngTemplateoutlet.
import { Component } from '@angular/core';
@Component({
selector: 'app-code404',
template: `
<ng-template #stpl>
Hello, Semlinker!
</ng-template>
<ng-template #atpl>
Big Keriy !
</ng-template>
<div [ngTemplateOutlet]="atpl"></div>
<div [ngTemplateOutlet]="stpl"></div>
`, })
export class Code404Component { }
The final view should be:
Big Keriy !
Hello, Semlinker!
b. ngOutletContex
You can tell the meaning by looking at the name.
The ngTemplateOutlet directive is based on the TemplateRef object. When using the ngTemplateOutlet directive, the context object of EmbeddedViewRef can be set through the ngTemplateOutletContext property. You can use let syntax to declare the binding context object attribute name.
import { Component, TemplateRef, ViewContainerRef, ViewChild,
AfterViewInit } from '@angular/core';
@Component({
selector: 'app-code404',
template: `
<!-- HeremessageyMap to belowcontextmiddlemessage Use interpolation expression to displaymessageValue of -->
<ng-template #stpl let-message="message">
<p>{{message}}</p>
</ng-template>
<!-- HeremessageyMap to belowcontextmiddlemessage , let-msgis a way with syntax sugar variable name ismsg-->
<ng-template #atpl let-msg="message">
<p>{{msg}}</p>
</ng-template>
<!-- If the variable value is not specified, it will be displayed $implicit Value of-->
<ng-template #otpl let-msg>
<p>{{msg}}</p>
</ng-template>
<div [ngTemplateOutlet]="atpl"
// Here ngOutletContext binds the context object [ngOutletContext]="context">
</div>
<div [ngTemplateOutlet]="stpl"
[ngOutletContext]="context">
</div>
<div [ngTemplateOutlet]="otpl"
[ngOutletContext]="context">
</div>
`,
})
export class Code404Component implements AfterViewInit{
@ViewChild('tpl')
tplRef: TemplateRef<any>;
constructor(private vcRef: ViewContainerRef) {}
ngAfterViewInit() {
();
}
context = { message: 'Hello ngOutletContext!',
$implicit: 'great, Semlinker!' };
// Here $implicit is a fixed writing method}
Let's look at the output view first:
Hello ngOutletContext!
Hello ngOutletContext!
Hello, Semlinker!
3. ngComponentOutlet directive
It feels great to listen to the name. This is not an insertion view, but an insertion component!
This directive uses a declared way to load components dynamically.
Write the components first, there are two in it. . Components:
@Component({
selector: 'alert-success',
template: `
<p>Alert success</p>
`,
})
export class AlertSuccessComponent { }
@Component({
selector: 'alert-danger',
template: `
<p>Alert danger</p>
`,
})
export class AlertDangerComponent { }
@Component({
selector: 'my-app',
template: `
<h1>Angular version 4</h1>
<ng-container *ngComponentOutlet="alert"></ng-container>
<button (click)="changeComponent()">Change component</button>
`, })
export class AppComponent {
alert = AlertSuccessComponent;
changeComponent() {
= AlertDangerComponent;
}
}
Of course, you also need to declare the entry in the module:
//
@NgModule({
// ...
declarations: [
AppComponent,
SignUpComponent,
AlertSuccessComponent,
AlertDangerComponent
],
entryComponents: [ // The components used in the commands are written here AlertSuccessComponent,
AlertDangerComponent
],
// ...
})
This way you can use the ngComponentOutlet directive to insert components and play with it:
<!-- Simple syntax --> <ng-container *ngComponentOutlet="componentTypeExpression"></ng-container> <!-- Complete syntax --> <ng-container *ngComponentOutlet="componentTypeExpression; injector: injectorExpression; content: contentNodesExpression;"> </ng-container>
Here is a simple example of the complete syntax:
// ...
@Component({
selector: 'ng-component-outlet-complete-example',
template: `
<ng-container *ngComponentOutlet="CompleteComponent;
injector: myInjector;
content: myContent"></ng-container>`
})
class NgTemplateOutletCompleteExample {
// This field is necessary to expose CompleteComponent to the template.
CompleteComponent = CompleteComponent;
myInjector: Injector;
myContent = [[('Ahoj')], [('Svet')]];
constructor(injector: Injector) {
= ([Greeter], injector);
}
}
4. Create structure instructions
I can't think of any good example, so I'll copy it to you:
//
import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';
@Directive({
selector: '[exeUnless]'
})
export class UnlessDirective {
@Input('exeUnless')
set condition(newCondition: boolean) { // set condition
if (!newCondition) {
();
} else {
();
}
}
constructor(private templateRef: TemplateRef<any>,
private viewContainer: ViewContainerRef) {
}
}
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<h2 *exeUnless="condition">Hello, Semlinker!</h2>
`,
})
export class AppComponent {
condition: boolean = false;
}
//
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<h2 *exeUnless="condition">Hello, Semlinker!</h2>
`,
})
export class AppComponent {
condition: boolean = false;
}
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.