如何檢測如果角2成分具有屬性

假設我有一個角2成分，看起來像這樣如何檢測如果角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>

我的問題是如何可以計算messageWasSet布爾屬性而不使用ElementRef？

來源

2016-09-28 battmanz

@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? 
}

來源

2016-09-28 18:10:39

我想根據組件是否存在'message =「...」'屬性以編程方式計算'messageWasSet'。組件的使用者不設置messageWasSet，它會自動計算。基本上，我想區分'message'是'undefined'這一事實，因爲它從來沒有設置過，因爲它被設置爲'undefined'，所以'undefined'。那有意義嗎？ – battmanz

我更新了我的答案。 –

你的回答非常接近。它只需要處理這樣一個事實，即即使'value'未定義，我仍然希望'messageWasSet'爲true。只是爲了完整性，你會爲'message'添加一個getter（確保將'value'保存到某個私有屬性中）？ – battmanz

您可以創建messageWasSet作爲返回基於message像下面值的屬性，

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

@Component({ 
    selector: 'my-app', 
    template: `<h3>How to detect if Angular 2 component has attribute</h3> 
    <hr /> 
    Child component 
    <my-message [message]="obj.message" ></my-message> 
    ` 
}) 
export class AppComponent { 
    obj = { message: 'hello' }; 
} 

@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; 

    get messageWasSet(){ 
    return !!this.message; 
    } 
}

這裏是Plunker!!

希望這有助於！

來源

2016-09-28 18:23:04

如何檢測如果角2成分具有屬性

回答

相關問題