Captura de 2 eventos angulares entre componentes hermanos
Acabo de comenzar a aprender Angular 2, y esta es mi primera pregunta de Stack Overflow, así que aquí va ...
Tengo un componente externo con dos componentes internos anidados. Tengo un botón enInnerComponent1
que, cuando se hace clic, dispara un evento que atrapa el componente externo, que luego pasa el valor (siempre verdadero) aInnerComponent2
. InnerComponent2
se muestra (* ngIf) en función de ese valor.
Funciona.
Buuuut ..InnerComponent2
tiene un botón que, cuando se hace clic, hace que ese valor sea falso, lo que oculta el componente.
Eso tambien funciona.
Pero una vez que me he escondidoInnerComponent2
, el botón enInnerComponent1
que muestraInnerComponent2
Ya no funciona. No veo ningún error y he confirmado que el componente externo todavía está recibiendo los eventos.
Aquí hay un plnkr que muestra el escenario:http://plnkr.co/edit/X5YnNVm0dpFwA4ddv4u7?p=preview
¿Alguna idea?
Muchas gracias.
Componente externo
//our root app component
import {Component} from 'angular2/core';
import {Inner1Component} from 'src/inner1';
import {Inner2Component} from 'src/inner2';
@Component({
selector: 'my-app',
providers: [],
template: `
<p>OuterComponent</p>
<inner1 (show2)="show2Clicked = $event"></inner1>
<inner2 [showMe]="show2Clicked"></inner2>
`,
directives: [Inner1Component, Inner2Component]
})
export class App {
show2Clicked: boolean;
}
InnerComponent1
import {Component, EventEmitter, Output} from 'angular2/core'
@Component({
selector: 'inner1',
providers: [],
template: `
<p>inner1</p>
<button (click)="showInner2()">Show inner2</button>
`,
directives: []
})
export class Inner1Component {
@Output() show2 = new EventEmitter<boolean>();
showInner2() {
this.show2.emit(true);
}
}
InnerComponent2
import {Component, Input} from 'angular2/core'
@Component({
selector: 'inner2',
providers: [],
template: `
<div *ngIf="showMe">
<p>Inner2</p>
<button (click)="showMe = false">Cancel</button>
</div>
`,
directives: []
})
export class Inner2Component {
@Input() showMe: boolean;
}