1. 元素

rush:js;"> import { Component,TemplateRef,ViewContainerRef,ViewChild,AfterViewInit } from '@angular/core'; @Component({ selector: 'app-code404',template: ` Big Keriy ! `,}) export class Code404Component implements AfterViewInit{

// @ViewChild 装饰器获取模板元素
@ViewChild('tpl')
tplRef: TemplateRef;
constructor(private vcRef: ViewContainerRef) {}
ngAfterViewInit() {

// 使用ViewContainerRef对象的createEmbeddedView方法创建内嵌视图。
this.vcRef.createEmbeddedView(this.tplRef);
} }

这样其实我们在视图中就得到了一个什么...啊，就是一个'Big Keriy !'的字符串。

2. ngTemplateOutlet指令

a. ngTemplateOutlet

和routerOutlet是一个意思，将视图(标签中的内容)放到对应的ngTemplateoutlet下面。

rush:js;"> import { Component } from '@angular/core'; @Component({ selector: 'app-code404',template: ` Hello,Semlinker!

Big Keriy !

`,}) export class Code404Component { }

最终的视图应该是：

Big Keriy ! Hello,Semlinker!

b. ngOutletContex

看名字就知道意思。

ngTemplateOutlet指令基于TemplateRef对象，在使用ngTemplateOutlet指令时，可以通过ngTemplateOutletContext属性来设置来设置EmbeddedViewRef的上下文对象。可以使用let语法来声明绑定上下文对象属性名。

rush:js;"> import { Component,template: `

`,}) export class Code404Component implements AfterViewInit{ @ViewChild('tpl') tplRef: TemplateRef; constructor(private vcRef: ViewContainerRef) {} ngAfterViewInit() { this.vcRef.createEmbeddedView(this.tplRef); } context = { message: 'Hello ngOutletContext!',$implicit: 'great,Semlinker!' }; // 这里的$implicit是固定写法 }

先看输出的视图：

Hello ngOutletContext! Hello ngOutletContext! Hello,Semlinker!

3. ngComponentOutlet指令

听着名字就很爽，这不是插入视图的，是插入组件的！

该指令使用声明的方式，动态加载组件。

先写组件，里面有两个。。组件：

rush:js;"> @Component({ selector: 'alert-success',template: `

Alert success

`,}) export class AlertSuccessComponent { } @Component({ selector: 'alert-danger',template: `

Alert danger

`,}) export class AlertDangerComponent { } @Component({ selector: 'my-app',template: `

Angular version 4

当然，还需要在模块中声明入口：

rush:js;"> // app.module.ts @NgModule({ // ... declarations: [ AppComponent,SignUpComponent,AlertSuccessComponent,AlertDangerComponent ],entryComponents: [ // 这里面写指令中呀用到的组件 AlertSuccessComponent,AlertDangerComponent ],// ... })

这样就可以使用ngComponentOutlet指令来插入组件玩耍了：

rush:js;">

<ng-container *ngComponentOutlet="componentTypeExpression;
injector: injectorExpression;
content: contentNodesExpression;">

这是一个完整语法简单的例子：

rush:js;"> // ... @Component({ selector: 'ng-component-outlet-complete-example',template: ` ` }) class NgTemplateOutletCompleteExample { // This field is necessary to expose CompleteComponent to the template. CompleteComponent = CompleteComponent; myInjector: Injector;

myContent = [[document.createTextNode('Ahoj')],[document.createTextNode('svet')]];

constructor(injector: Injector) {
this.myInjector = ReflectiveInjector.resolveAndCreate([Greeter],injector);
}
}

4. 创建结构指令

也想不出来一个什么好例子，抄一个例子过来：

rush:js;"> // uless.directive.ts

import { Directive,Input,ViewContainerRef } from '@angular/core';
@Directive({
selector: '[exeUnless]'
})
export class UnlessDirective {
@Input('exeUnless')
set condition(newCondition: boolean) { // set condition
if (!newCondition) {
this.viewContainer.createEmbeddedView(this.templateRef);
} else {
this.viewContainer.clear();
}
}
constructor(private templateRef: TemplateRef,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;
}

// app.component.ts

import { Component } from '@angular/core';
@Component({
selector: 'app-root',})
export class AppComponent {
condition: boolean = false;
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

结构指令自定义结构指令