Angular 2: Interacción de componentes, parámetros de entrada opcionales
Tengo una implementación donde el padre quiere pasar ciertos datos al componente hijo a través del uso del parámetro @Input
disponible en el componente hijo. Sin embargo, esta transferencia de datos es una cosa opcional y el padre puede o no puede pasarla según el requisito. Es posible tener parámetros de entrada opcionales en un componente. He descrito un escenario a continuación:
<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() { }
}
3 answers
Puede utilizar el ( ? ) operador como abajo
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'
}
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-02-26 01:09:42
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 son undefined
).
Puede implementar onChanges o hacer que la entrada sea un setter en lugar de una propiedad para que su código se ejecute cuando se pase un valor.
export class child {
@Input set showName(value: boolean) {
this._showName = value;
doSomethingWhenShowNameIsPassed(value);
}
constructor() { }
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-11-20 17:03:16
Tienes dos opciones aquí.
1) Puede usar un *ngIf
en el hijo en caso de que el hijo no necesite 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 hijo se muestre sin ninguna entrada, puede usar un configurador modificado para verificar la presencia de variables de entrada`
En el niño.ts:
private _optionalObject: any;
@Input()
set optionalObject(optionalObject: any) {
if(optionalObject) this._optionalObject = optionalObject;
}
get optionalObject() { return this._optionalObject; }
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-09-27 06:24:04