1. 元素@H_403_3@
404',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指令@H_403_3@
a. ngTemplateOutlet@H_403_3@
和routerOutlet是一个意思，将视图(标签中的内容)放到对应的ngTemplateoutlet下面。
404',template: `
Hello,Semlinker!
Big Keriy !
`,})
export class Code404Component { }
最终的视图应该是：
Big Keriy !
Hello,Semlinker!
b. ngOutletContex@H_403_3@
看名字就知道意思。
ngTemplateOutlet指令基于TemplateRef对象，在使用ngTemplateOutlet指令时，可以通过ngTemplateOutletContext属性来设置来设置EmbeddedViewRef的上下文对象。可以使用let语法来声明绑定上下文对象属性名。
{{message}}
{{msg}}
{{msg}}
`,})
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指令@H_403_3@
听着名字就很爽，这不是插入视图的，是插入组件的！
该指令使用声明的方式，动态加载组件。
先写组件，里面有两个。。组件：
Alert success
`,})
export class AlertSuccessComponent { }
@Component({
selector: 'alert-danger',template: `
Alert danger
`,})
export class AlertDangerComponent { }
@Component({
selector: 'my-app',template: `
Angular version 4
当然，还需要在模块中声明入口：
这样就可以使用ngComponentOutlet指令来插入组件玩耍了：
<ng-container *ngComponentOutlet="componentTypeExpression;
injector: injectorExpression;
content: contentNodesExpression;">
这是一个完整语法简单的例子：
`
})
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. 创建结构指令@H_403_3@
也想不出来一个什么好例子，抄一个例子过来：
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;
}
猜你在找的JavaScript相关文章
// @ViewChild 装饰器获取模板元素
@ViewChild('tpl')
tplRef: TemplateRef
constructor(private vcRef: ViewContainerRef) {}
ngAfterViewInit() {
// 使用ViewContainerRef对象的createEmbeddedView方法创建内嵌视图。
this.vcRef.createEmbeddedView(this.tplRef);
} }
这样其实我们在视图中就得到了一个什么...啊，就是一个'Big Keriy !'的字符串。
2. ngTemplateOutlet指令@H_403_3@
a. ngTemplateOutlet@H_403_3@
和routerOutlet是一个意思，将视图(
最终的视图应该是：
Big Keriy ! Hello,Semlinker!
b. ngOutletContex@H_403_3@
看名字就知道意思。
ngTemplateOutlet指令基于TemplateRef对象，在使用ngTemplateOutlet指令时，可以通过ngTemplateOutletContext属性来设置来设置EmbeddedViewRef的上下文对象。可以使用let语法来声明绑定上下文对象属性名。
{{msg}}
先看输出的视图：
Hello ngOutletContext! Hello ngOutletContext! Hello,Semlinker!
3. ngComponentOutlet指令@H_403_3@
听着名字就很爽，这不是插入视图的，是插入组件的！
该指令使用声明的方式，动态加载组件。
先写组件，里面有两个。。组件：
Alert danger
`,}) export class AlertDangerComponent { } @Component({ selector: 'my-app',template: `Angular version 4
当然，还需要在模块中声明入口：
这样就可以使用ngComponentOutlet指令来插入组件玩耍了：
<ng-container *ngComponentOutlet="componentTypeExpression;
injector: injectorExpression;
content: contentNodesExpression;">
这是一个完整语法简单的例子：
myContent = [[document.createTextNode('Ahoj')],[document.createTextNode('Svet')]];
constructor(injector: Injector) {
this.myInjector = ReflectiveInjector.resolveAndCreate([Greeter],injector);
}
}
4. 创建结构指令@H_403_3@
也想不出来一个什么好例子，抄一个例子过来：
@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
}
}
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;
}
