角度2:组件交互，可选输入参数

Question

我有一个实现，其中父组件希望通过使用子组件上可用的< code>@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

这里有两个选项。

1）您可以在孩子身上使用*ngIF，以防孩子在其Input为空时不需要显示。

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

2)如果在没有任何输入的情况下显示子变量，您可以使用修改后的setter来检查输入变量的存在情况

在孩子中：

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

Answer 2

默认情况下，输入值是可选的。您的代码仅在尝试访问未实际传递的输入的属性时才会失败（因为这些输入是未定义的）。

您可以实现OnChanges或使输入成为setter而不是属性，以便在实际传递值时执行代码。

export class child {

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

    constructor() { }
}

Answer 3

您可以使用（？）操作员如下

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'
  }
}

现场演示