如何检测如果角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成分具有属性

回答

相关问题