假设我有一个像这样的 Angular 2 组件
@Component({
selector: 'my-message',
template: `
<p *ngIf="messageWasSet">{{message}}</p>
<p *ngIf="!messageWasSet">No message was specified</p>
`
})
export class MessageComponent {
@Input() public message: string;
public messageWasSet: boolean; // How to calculate this?
}
以下是一些示例用法:
示例 1
<my-message message="Hi world"></my-message>
<!-- Rendered innerHTML -->
<p>Hi world</p>
示例 2
<!-- suppose obj.message = 'Viva Angular 2!' -->
<my-message [message]="obj.message"></my-message>
<!-- Rendered innerHTML -->
<p>Viva Angular 2!</p>
示例 3
<!-- suppose obj.message = undefined -->
<my-message [message]="obj.message"></my-message>
<!-- Rendered innerHTML -->
<p></p>
示例 4
<!-- Notice that there is no `message` binding at all -->
<my-message></my-message>
<!-- Rendered innerHTML -->
<p>No message was specified</p>
我的问题是如何在不使用 ElementRef
的情况下计算 messageWasSet
bool 属性?
最佳答案
@Component({
selector: 'my-message',
template: `
<p *ngIf="messageWasSet">{{message}}</p>
<p *ngIf="!messageWasSet">No message was specified</p>
`
})
export class MessageComponent {
private _message: string;
public get message() {
return this._message;
}
@Input() public set message(value: string) {
this.messageWasSet = true;
this._message = value;
}
public messageWasSet: boolean; // How to calculate this?
}
关于angular - 如何检测 Angular 2 组件是否具有属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39754656/