parametros - Angular 2: Interacción de componentes, parámetros de entrada opcionales

pasar parametros entre componentes angular 4

Question

Tengo una implementación en la que el padre quiere pasar ciertos datos al componente secundario mediante el uso del parámetro @Input disponible en el componente secundario. Sin embargo, esta transferencia de datos es una cosa opcional y el padre puede o no pasarla según el requisito. Es posible tener parámetros de entrada opcionales en un componente. A continuación describo un escenario:

 <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

Los valores de entrada son opcionales por defecto. Su código fallará solo cuando intente acceder a las propiedades de las entradas que en realidad no se pasan (ya que esas entradas undefined están undefined ).

Puede implementar OnChanges o hacer que la entrada sea un configurador en lugar de una propiedad para que su código se ejecute cuando realmente se pasa un valor.

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

Answer 2

Puede utilizar el operador ( ? ) De la siguiente manera

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() { }
}

El componente padre que usa el componente hijo será como

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

DEMO EN VIVO

Answer 3

Tienes dos opciones aquí.

1) Puede usar un *ngIf en el niño en caso de que el niño no tenga que mostrarse cuando su Entrada esté vacía.

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

2) En caso de que el niño se muestre sin ninguna entrada, puede utilizar un setter modificado para verificar la presencia de variables de entrada.

En el niño.

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