详解Angular 自定义结构指令

详解Angular 自定义结构指令

1. 元素

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下面。

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语法来声明绑定上下文对象属性名。

import { Component, TemplateRef, ViewContainerRef, ViewChild,

AfterViewInit } from '@angular/core';

@Component({

selector: 'app-code404',

template: `

{{message}}

{{msg}}

{{msg}}

// 这里ngOutletContext绑定的是context对象

[ngOutletContext]="context">

[ngOutletContext]="context">

[ngOutletContext]="context">

`,

})

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. ngDREqqVBpComponentOutlet指令

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

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

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

@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: `

Change component

`, })

export class AppComponent {

alert = AlertSuccessComponent;

changeComponent() {

this.alert = AlertDangerComponent;

}

}

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

// app.module.ts

@NgModule({

// ...

declarations: [

AppComponent,

SignUpComponent,

AlertSuccessComponent,

AlertDangerComponent

],

entryComponents: [ // 这里面写指令中呀用到的组件

AlertSuccessComponent,

AlertDangerComponent

],

// ...

})

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

injector: injectorExpression;

content: contentNodesExpression;">

injector: injectorExpression;

content: contentNodesExpression;">

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

// ...

@Component({

selector: 'ng-component-outlet-complete-example',

template: `

injector: myInjector;

content: myContent">

injector: myInjector;

content: myContent">

})

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. 创建结构指令

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

// uless.directive.ts

import { Directive, Input, TemplateRef, 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: `

`,

})

export class AppComponent {

condition: boolean = false;

}

// app.component.ts

import { Component } from '@angular/core';

@Component({

selector: 'app-root',

template: `

`,

})

export class AppComponent {

condition: boolean = false;

}

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。