Angular 2: Компонентное взаимодействие, дополнительные входные параметры

У меня есть реализация, где родитель хочет передать определенные данные дочернему компоненту с помощью параметра @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() { }

}

Ответ 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

Ответ 2

По умолчанию значения ввода необязательны. Ваш код будет терпеть неудачу только тогда, когда он попытается получить доступ к свойствам входов, которые фактически не переданы (поскольку эти входы undefined).

Вы можете реализовать OnChanges или сделать ввод setter вместо свойства, чтобы ваш код выполнялся, когда действительно передано значение.

export class child {

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

    constructor() { }
}

Ответ 3

Здесь у вас есть два варианта.

1) Вы можете использовать *ngIf для ребенка, если дочерний элемент не должен отображаться, когда его вход пуст.

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

2) Если ребенок должен отображаться без ввода, вы можете использовать модифицированный сеттер для проверки наличия входных переменных `

В child.ts:

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