Угловой 2: Извещатель не работает должным образом

Question

У меня есть два компонента. У меня есть компонент меню справки и компонент навигации. Когда пользователь нажимает кнопку справки, он должен отображать меню справки. Я сделал переменную, называемую help в компоненте приложения. В компоненте nav я сделал излучатель событий, чтобы попробовать двустороннюю привязку, но он не работает на компоненте nav. Я немного смущен, потому что переменная help работает только при загрузке приложения, но не при нажатии кнопки справки.

приложение component.ts

help:boolean = true; 

App компонент HTML

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

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

App-нав компонент HTML

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

App-нав 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-помощь component.html

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

App-помощь 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

Не только изменение [(helps)] на [(help)], как указано в Фабио, но вам также необходимо изменить имя переменной в директиве, чтобы удалить s с helpsChange. Важно, чтобы вход и выход соответствовали формату именования property/propertyChange, когда вы хотите использовать синтаксис «банана в коробке» [()]