微客导航 » 文章资讯 » 详解Angular 自定义结构指令

详解Angular 自定义结构指令

2024-02-18 13:40:04 277

1.元素

import{Component,TemplateRef,ViewContainerRef,ViewChild,
AfterViewInit}from'@angular/core';
@Component({
selector:'app-code404',
template:`


BigKeriy!

`,
})
exportclassCode404ComponentimplementsAfterViewInit{

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

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

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

2.ngTemplateOutlet指令

a.ngTemplateOutlet

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

import{Component}from'@angular/core';
@Component({
selector:'app-code404',
template:`

Hello,Semlinker!


BigKeriy!

`,}) exportclassCode404Component{}

最终的视图应该是：

BigKeriy!
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}}

`, }) exportclassCode404ComponentimplementsAfterViewInit{ @ViewChild('tpl') tplRef:TemplateRef; constructor(privatevcRef:ViewContainerRef){} ngAfterViewInit(){ this.vcRef.createEmbeddedView(this.tplRef); } context={message:'HellongOutletContext!', $implicit:'great,Semlinker!'}; //这里的$implicit是固定写法 }

先看输出的视图：

HellongOutletContext!
HellongOutletContext!
Hello,Semlinker!

3.ngComponentOutlet指令

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

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

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

@Component({
selector:'alert-success',
template:`
Alertsuccess
`,
})
exportclassAlertSuccessComponent{}
@Component({
selector:'alert-danger',
template:`
Alertdanger
`,
})
exportclassAlertDangerComponent{}
@Component({
selector:'my-app',
template:`
Angularversion4

Changecomponent
`,})
exportclassAppComponent{
alert=AlertSuccessComponent;
changeComponent(){
this.alert=AlertDangerComponent;
}
}

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

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

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

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

//...
@Component({
selector:'ng-component-outlet-complete-example',
template:`
`
})
classNgTemplateOutletCompleteExample{
//ThisfieldisnecessarytoexposeCompleteComponenttothetemplate.
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]'
})
exportclassUnlessDirective{
@Input('exeUnless')
setcondition(newCondition:boolean){//setcondition
if(!newCondition){
this.viewContainer.createEmbeddedView(this.templateRef);
}else{
this.viewContainer.clear();
}
}
constructor(privatetemplateRef:TemplateRef,
privateviewContainer:ViewContainerRef){
}
}


import{Component}from'@angular/core';
@Component({
selector:'app-root',
template:`
Hello,Semlinker!
`,
})
exportclassAppComponent{
condition:boolean=false;
}


//app.component.ts

import{Component}from'@angular/core';
@Component({
selector:'app-root',
template:`
Hello,Semlinker!
`,
})
exportclassAppComponent{
condition:boolean=false;
}

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

返回顶部
3162201930
czq8825@qq.com

详解Angular 自定义结构指令

Angularversion4

热门推荐

随机推荐