Angular 2：組件交互，可選輸入參數

Question

我有一個實現，其中父母想通過使用子組件可用的@Input參數將某些數據傳遞給子組件。但是，此數據傳輸是可選項，父項可能會或可能不會按照要求傳遞它。是否有可能在組件中有可選的輸入參數。我描述了以下情況：

<parent> 
    <child [showName]="true"></child> //passing parameter 
    <child></child> //not willing to passing any parameter 
</parent> 



//child component definition 
@Component { 
    selector:'app-child', 
    template:`<h1>Hi Children!</h1> 
      <span *ngIf="showName">Alex!</span>` 
} 


export class child { 

    @Input showName: boolean; 

    constructor() { } 

} 

Answer 1

可以使用（？）操作如下

import {Component,Input} from '@angular/core'; 
@Component({ 
    selector:'child', 
    template:`<h1>Hi Children!</h1> 
      <span *ngIf="showName">Alex!</span>` 
}) 


export class ChildComponent { 

    @Input() showName?: boolean; 

    constructor() { } 

} 

使用的子組件的父組件將作爲

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
     <h2>Hello {{name}}</h2> 
     <child [showName]="true"></child> 
     <child ></child> 
    </div> 
    `, 
}) 
export class App { 
    name:string; 
    constructor() { 
    this.name = 'Angular2' 
    } 
} 

LIVE DEMO

Answer 2

輸入值默認爲可選。只有當它試圖訪問實際沒有傳遞的輸入屬性時（因爲這些輸入是undefined），您的代碼纔會失敗。

您可以實現OnChanges或使輸入成爲setter而不是屬性，以便在實際傳遞值時執行代碼。

export class child { 

    @Input set showName(value: boolean) { 
     this._showName = value; 
     doSomethingWhenShowNameIsPassed(value); 
    } 

    constructor() { } 
} 

Answer 3

您有兩種選擇。

1）您可以在兒童上使用*ngIf，以防兒童在輸入爲空時不需要顯示。

<parent> 
    <child *ngIf="true" [showName]="true"></child> //passing parameter 
    <child></child> //not willing to passing any parameter 
</parent> 

2）如果孩子應該得到顯示沒有任何輸入，您可以使用修改後的二傳手檢查輸入的存在variables`

在child.ts：

private _optionalObject: any; 
@Input() 
set optionalObject(optionalObject: any) { 
    if(optionalObject) this._optionalObject = optionalObject; 
} 
get optionalObject() { return this._optionalObject; }