ho appena iniziato l'apprendimento angolare 2, e questa è la mia prima domanda Stack Overflow, quindi ecco qui ...angolare 2 evento di cattura tra i componenti di pari livello
Ho un componente esterno con due componenti interni nidificati. Ho un pulsante in InnerComponent1
che, quando si fa clic, attiva un evento catturato dal componente esterno, che quindi trasmette il valore (sempre true) a InnerComponent2
. InnerComponent2
viene visualizzato (* ngIf) in base a tale valore.
Funziona.
Buuuut .. InnerComponent2
ha un pulsante che, quando viene premuto, rende falso quel valore, che nasconde il componente.
Anche questo funziona.
Ma una volta che ho nascosto InnerComponent2
, il pulsante InnerComponent1
che visualizza InnerComponent2
non funziona più. Non vedo errori e ho confermato che il componente esterno sta ancora ricevendo gli eventi.
Ecco un plnkr che mostra lo scenario: http://plnkr.co/edit/X5YnNVm0dpFwA4ddv4u7?p=preview
Qualche idea?
Grazie mille.
componente esterno
//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;
}
perfetto. Grazie mille per la tua pronta risposta. Funziona come previsto. Giusto per chiarire esattamente cosa sta succedendo qui: abbiamo bisogno dell'emettitore di eventi in 'inner2' solo per attivare la rivalutazione delle variabili e del rerender? Perché l'evento 'showMeChange' che viene emesso non viene catturato da nessuna parte. – David
Ho aggiornato la mia risposta (era troppo lungo per un commento). –
Stenografia. Gotcha. Questo è esattamente quello che stavo cercando. ** Grazie mille. ** La documentazione ufficiale di Angular2 è ancora carente, comprensibilmente. – David