javascript - Angular 2:事件发射器无法正常工作

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

应用程序component.ts

help:boolean = true;

应用组件html

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

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

App-Nav组件html

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

App-nav component.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);
 }
}

应用程序帮助component.html

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

应用程序帮助component.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);
}

}

最佳答案

不仅像Fabio提到的那样将[(helps)]更改为[(help)]，还需要在指令中更改变量的名称，以从s中删除​​helpsChange。当您要使用“框内香蕉”语法property/propertyChange时，输入和输出必须遵循命名格式[()]，这一点很重要