角2事件同級組件之間的捉

我剛開始學習角2，這是我第一次堆棧溢出的問題，所以這裏去...角2事件同級組件之間的捉

我有兩個嵌套的內部組件的外部組件。我在InnerComponent1中有一個按鈕，點擊後會觸發外部組件捕獲的事件，然後將該值（始終爲true）傳遞到InnerComponent2。根據該值顯示（* ngIf）InnerComponent2。

它的工作原理。

Buuuut .. InnerComponent2有一個按鈕，單擊該按鈕時，該值將爲false，從而隱藏組件。

也可以。

但是，一旦我隱藏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; 
}

來源

2016-02-28 David

的showMe和shwo2Clicked值不同步。

我加入EventEmitter到<inner2>和改變

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

到

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

我想這是現在的工作，你希望

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

更新

綁定[showMe]只能在一個方向上工作。當show2Clicked設置爲true時，showMe也將設置爲true。取消將showMe設置爲false。如果show2Clicked再次設置爲true，則不會發生任何事情，因爲它已經是true而showMe未更新。EventEmitter和雙向速記綁定[(showMe)],show2Clicked也設置爲false當showMe設置爲false並將其設置爲true實際上是通過綁定向下傳播的更改。

[(showMe)]="show2Clicked"爲[showMe]="show2Clicked" (showMeChange)="show2Clicked=$event"的簡寫，並且當輸出具有相同的名稱作爲輸入，但具有附加Change

來源

2016-02-28 17:39:31

完善。非常感謝您的快速響應。按預期工作。只是爲了澄清到底發生了什麼：我們需要'inner2'中的事件發射器來觸發變量的重新評估和重新渲染？因爲發出的'showMeChange'事件沒有被捕獲到任何地方。 – David

我更新了我的答案（評論太長）。 –

速記。疑難雜症。這正是我所期待的。 **非常感謝。**官方的Angular2文檔仍然缺乏，可以理解。 – David

我有同樣的問題的速記只能在從同級部件點擊一個按鈕進行切換的形式。我的解決方案是使用通用服務。

所以在部件1：

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

在服務：

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

在組分2：

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

來源

2017-09-14 21:19:04

角2事件同級組件之間的捉

回答

相關問題