javascript - Angular 2 : Event Emitter not working properly

Question

我有两个组件。我有一个帮助菜单组件和一个导航组件。当用户单击帮助按钮时，它应该显示帮助菜单。我在应用程序组件中创建了一个名为 help 的变量。在导航组件中，我制作了一个事件发射器来尝试双向绑定(bind)，但它在导航组件上不起作用。我有点困惑，因为变量帮助仅在应用程序加载时起作用，但在我单击帮助按钮时不起作用。

应用组件.ts

help:boolean = true;

应用程序组件 html

<!-- app menu div -->
<app-help [(helps)]="help"></app-help>

<!-- app navigation -->
<app-nav [help]="help"></app-nav>

应用程序导航组件 html

<button class="circle" (click)="helpMenu()">H</button>

应用导航组件.ts

export class NavComponent implements OnInit{

@Input() help:boolean;
@Output() HelpsChange: EventEmitter<boolean> = new EventEmitter<boolean>();

constructor(){}

// when user clicks the help button
helpMenu(){
    this.help = true;
    this.HelpsChange.emit(this.help);
 }
}

应用程序帮助组件.html

<div id="helpMenu" *ngIf="help==true">
<p>Help</p>
<button (click)="closeHelp()">Close</button>

应用程序帮助组件.ts

export class HelpComponent implements OnInit {

@Input()  help:boolean;
@Output() helpsChange: EventEmitter<boolean> = new EventEmitter<boolean>();

constructor() { }

ngOnInit() {
}

closeHelp(){
 this.help = false; 
 this.helpsChange.emit(this.help);
}

}

Answer 1

不只是改变[(helps)]至[(help)]就像 Fabio 提到的那样，但您还需要更改指令中变量的名称以删除 s来自helpsChange 。输入和输出遵循命名格式 property/propertyChange 很重要。 ，当你想使用“banana in a box”语法[()]时