角2 - コンポーネントを呼び出す

Question

私はANgular 2アプリケーションを開発中です。

私はhome.component.tsにある小さなフォームを持っています。これは以下のようになります。

ユーザーが[送信]ボタンをクリックするとデータテーブルには、一致する結果がロードされている必要があります。以下のように。これはhome.componentからresult.componentを呼び出すための最善のアプローチは何異なるコンポーネントresult.component.ts

のですか？ 最初のコンポーネントは、結果のデータセットを2番目のコンポーネントに渡す必要があります。

Answer 1

あなたは@Componentディレクティブで定義されているそのセレクタにより、結果を表示して@Inputを経由して、結果を渡すことができます。

result.component.ts

@Component({ 
    selector: 'search-result', 
    teplateUrl: './result.component.html' 
}) 
export class ResultComponent { 
    @Input() result: Result; 
} 

家。 component.ts

export class HomeComponent { 
    searchString: string; 
    result: Result; 

    performSearch(searchString: string) { 
    // perform API call here and save result to this.result 
    } 
} 

home.componen

<label for="q"><strong>Territory:</strong></label><br> 
<input type="text" name="q" ([ngModel])="searchString"><br> 
<button (click)="performSearch(searchString)">Search</button> 
Result: 
<search-result result="result"></search-result> 

result.component.html t.html

<table> 
    <tr *ngFor="let item of result"> 
    <td>{{ item }} 
    </tr> 
</table>