Eğik 2 olay

Question

Sadece Açısal 2 öğrenme başladık ve bu

Ben iç içe iki iç bileşenleri ile bir dış bileşeni var ... işte, hep ilk yığın taşması soru gider. InnerComponent1'da, tıklatıldığında, dış bileşenin yakaladığı bir olayı tetikleyen, daha sonra değeri (her zaman doğru) InnerComponent2'a geçiren bir düğmem var. Bu değere göre InnerComponent2 görüntülenir (* ngIf).

Çalışıyor.

Buuuut .. InnerComponent2, tıklatıldığında, bu değeri yanlış kılan, bileşeni gizleyen bir düğmeye sahiptir.

Bu da işe yarıyor.

Ancak, bir kez InnerComponent2 gizledim,görüntülenen InnerComponent1 düğmesinin artık çalışmaz. Herhangi bir hata görmüyorum ve dış bileşenin hala olayları aldığını doğruladım. http://plnkr.co/edit/X5YnNVm0dpFwA4ddv4u7?p=preview

Herhangi düşünceler:

İşte senaryoyu gösteren bir plnkr var?

Çok teşekkürler.

Dış bileşen

//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; 
} 

Answer 1

showMe ve shwo2Clicked değerlerinin senkronizasyondan çıkması.

ekledim ve EventEmitter<inner2> ve ben artık beklediğiniz gibi çalışıyor tahmin

<inner2 [(showMe)]="show2Clicked"></inner2> 

için

<inner2 [showMe]="show2Clicked"></inner2> 

değişti

http://plnkr.co/edit/tXzr3XgTrgMWMVzAw8d7?p=preview

güncelleme

Bağlama [showMe], yalnızca bir yönde çalışır. show2Clicked öğesi true olarak ayarlandığında, showMe doğru olarak da ayarlanacaktır. showMe iptallerini false olarak iptal eder. Daha sonra show2Clickedtrue olarak ayarlanmışsa, zaten true ve showMe güncelleştirilmediğinden hiçbir şey olmuyor.EventEmitter ve iki yönlü kestirme bağlama [(showMe)], show2Clicked, showMefalse olarak ayarlandığında ve true'a ayarlandığında, aslında bağlanmada aşağı doğru yayılan bir değişiklik olduğunda false olarak ayarlanır.

[(showMe)]="show2Clicked"

[showMe]="show2Clicked" (showMeChange)="show2Clicked=$event" için bir kısaltmadır ve çıkış girdi olarak ama aynı problem vardı ek Change

Answer 2

ile aynı ada sahip olduğunda steno sadece kardeş bileşeninden bir düğmeyi tıklayarak üzerine bir form anahtarlama işleri . Benim çözümüm ortak bir hizmet kullanmaktı. böylece parçasının 1 içerisinde

:

<button (click)="showMessageForm()" > 
showForm = true; 
showMessageForm() { 
    this.messageService.switchMessageForm(this.showForm); 
    this.showForm = !this.showForm; 
} 

hizmet:

switchMessageFormEvent = new EventEmitter<boolean>(); 
switchMessageForm(bSwitch:boolean) { 
    this.switchMessageFormEvent.emit(bSwitch); 
} 

bileşen 2:

ngOnInit() { 
    this.messageService.switchMessageFormEvent.subscribe(
     (bSwitch: boolean) => { 
      if(bSwitch) { 
       $('.message-input').slideDown("normal"); 
      }else { 
       this.myForm.reset(); 
       $('.message-input').slideUp("normal"); 
      } 
     } 
    ); 
}