角2：イベントエミッタが正しく機能しない

Question

私は2つのコンポーネントを持っています。私はヘルプメニューコンポーネントとナビゲーションコンポーネントを持っています。ユーザーがヘルプボタンをクリックすると、ヘルプメニューが表示されます。私はappコンポーネントでhelpという変数を作りました。 navコンポーネントでは、双方向バインディングを試すイベントエミッタを作成しましたが、navコンポーネントでは機能しません。私はちょっと混乱しています。なぜなら、可変ヘルプはアプリケーションがロードされているときにのみ機能しますが、ヘルプボタンをクリックすると機能しないからです。

アプリ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-ヘルプ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

上記のFabioのようにを[(help)]に変更するだけでなく、からsを削除するために、ディレクティブの変数名を変更する必要があります。 「ボックス内のバナナ」構文を使用するときは、入力と出力がネーミング形式property/propertyChangeに従うことが重要です[()]