1つのhtmlテンプレートでイベントを使用して、別のテンプレートの[hidden]要素を制御します。角度2

Question

2つのTypeScriptファイルがあります。両方とも@ComponentにHTMLテンプレートがあります。 [hidden]="collapsed"で折りたたむか展開できる情報カードを1つのテンプレートで表示してみましょう。この関数は、ファイルのどちらかに存在する：

public collapsed : boolean = false; 
    toggleCollapsed(){ 
    this.collapsed = !this.collapsed; 
    } 

そこで私は、このイベント

<button clear (click)="toggleCollapsed()"> 
     <ion-icon name="expand"></ion-icon> 
     Expand All 
    </button> 

をトリガするボタンを持っている別のテンプレートに基本的にはボタンと情報カードが異なるテンプレート/ファイルであるが、上に表示しますビューの同じページ。別のテンプレートになっているにもかかわらず、ボタンに情報カードを展開/折りたたむのを助ける必要があります。 私はこのトピックは答えた場合にも他の人を助けるために十分一般的である考え出し:)

Answer 1

だけ短いサンプル：

<panel #panel> 
<button (click)="panel.collapsed=!panel.collapsed"> 

は、コンポーネント参照#panelを作成し、状態を変更するためにそれを使用します。

Answer 2

これは、2つのコンポーネント間の関係（存在する場合）によって異なります。親子関係がある場合は、入力プロパティーまたはイベント（通信をどの方向に流す必要があるかに応じて）を使用できます。

関係がない場合は、件名のサービスを使用してください。 1つのコンポーネントはイベントを受信するためにSubjectにsubscribe()、もう1つはSubjectを介してイベントを生成します。

Component Interaction Cookbookには3つの例があります。