Question

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

app 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);
 }
}

App-help component.html

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

App-help 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);
}

}

Answer 1

不仅像Fabio所提到的那样将[(helps)]更改为[(help)]，而且您还需要更改指令中变量的名称，以便从s中删除helpsChange 。当您想要使用“框中的香蕉”语法property/propertyChange

时，输入和输出遵循命名格式[()]非常重要

Angular 2：事件发射器无法正常工作

1 个答案: