* ng如果爲Angular2中的html屬性

Question

<ion-navbar hideBackButton > 
    <ion-title> </ion-title> 
    ... 
    ... 

我希望hideBackButton有條件，我不想用* ngIf重複整個ion-navbar元素。 是否可以應用* ngIf作爲hideBackButton屬性？

Answer 1

您可以利用插值：

<ion-navbar [attr.hideBackButton]="someExpression"> 
    <ion-title> </ion-title> 
    ... 
... 

如果someExpression爲空屬性將不存在，如果someExpression爲空字符串，則該屬性將在那裏。下面是一個示例：

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div [attr.hideBackButton]="someExpression"> 
     Test 
    </div> 
    <div (click)="toggleAttribute()">Toggle</div> 
    ` 
}) 
export class AppComponent { 
    constructor() { 
    this.someExpression = null; 
    } 

    toggleAttribute() { 
    if (this.someExpression==null) { 
     this.someExpression = ''; 
    } else { 
     this.someExpression = null; 
    } 
    } 
} 

看到這個plunkr：https://plnkr.co/edit/LL012UVBZ421iPX4H59p?p=preview

Answer 2

你必須提供null爲他們得到清除布爾值，

<ion-navbar [attr.hideBackButton]="someExpression ? true : null"> 

否則角創建

<ion-navbar hideBackButton="false">