角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事件同级组件之间的捉

回答

相关问题