1. angular语法中的*符号
*
是一个语法糖,举例:
<a *ngIf="isLogin">退出</a>
等价于:
<ng-template [ngIf]="isLogin">
<a>退出</a>
</ng-template>
2. 只有一个输入属性时
html
使用:
<div *appMyDirective="firstParams">使用结构型指令</div>
.directive.ts
指令文件:
import { Directive, TemplateRef, ViewContainerRef, Input } from '@angular/core';
@Directive({
selector: '[appMyDirective]'
})
export class MyDirectiveDirective {
private hasView = false;
/**
* 写法一:
* 1.@Input()括号里面不写参数名称时,set appMyDirective(val: any) 的属性名一定要跟指令的名称(即selector定义的名称)相同;
*/
@Input()
set appMyDirective(val: any) {
// val:传入的属性值
console.log(val, 'val');
if(val && !this.hasView) {
// 如果条件为真,创建该模板元素
this._viewContainer.createEmbeddedView(this._template);
} else if (!val && this.hasView) {
this.hasView = false;
// 否则清空视图
this._viewContainer.clear();
}
}
/**
* 写法二:
* 2.当@Input()括号里面有参数时,设置的字符串参数一定要跟指令名称相同时,这时set myDirective(val: any) 的属性名可以不跟指令的名称相同。
*/
@Input('appMyDirective')
set myDirective(val: any) {
console.log(val, 'val',)
if(val && !this.hasView) {
// 如果条件为真,创建该模板元素
this._viewContainer.createEmbeddedView(this._template);
} else if (!val && this.hasView) {
this.hasView = false;
// 否则清空视图
this._viewContainer.clear();
}
}
constructor(
private _template: TemplateRef<any>,
private _viewContainer: ViewContainerRef
) { }
}
3. 有多个输入属性时
html
使用,注意:从第二个参数开始,要通过键值对的方式传入,多个参数使用;
分隔。
<div *appMyDirective="firstParams;secondParams: secondParams;">使用结构型指令</div>
.directive.ts
指令文件,注意:这里跟只有一个输入属性时一样,也是两种书写方式,且这里的输入属性名appMyDirectiveSecondParams
的格式为 指令名称 + 绑定的参数的键值名且首字母大写 appMyDirective
+ SecondParams
。
// 方式一:
@Input()
set appMyDirectiveSecondParams(val: any) {
console.log(val, 'val',)
}
// 方式二:
@Input('appMyDirectiveSecondParams')
set appMyDirectiveSecondParams(val: any) {
console.log(val, 'val',)
}