Угловое событие 2 ловит между родственными компонентами
Я только начал изучать Angular 2, и это мой первый вопрос о переполнении стека, так что ...
У меня есть внешний компонент с двумя вложенными внутренними компонентами. У меня есть кнопка вInnerComponent1
при нажатии запускается событие, которое перехватывает внешний компонент, который затем передает значение (всегда true) вInnerComponent2
. InnerComponent2
отображается (* ngIf) на основе этого значения.
Оно работает.
Buuuut ..InnerComponent2
имеет кнопку, которая при нажатии делает это значение ложным, что скрывает компонент.
Это тоже работает.
Но однажды я спряталсяInnerComponent2
Кнопка вInnerComponent1
что отображаетInnerComponent2
больше не работает. Я не вижу никаких ошибок, и я подтвердил, что внешний компонент все еще получает события.
Вот plnkr, который показывает сценарий:http://plnkr.co/edit/X5YnNVm0dpFwA4ddv4u7?p=preview
Какие-нибудь мысли?
Спасибо большое.
Внешний компонент
//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;
}