ここでHousingAppComponentは親クラスです。この ビューオブジェクトを子コンポーネントCoursesComponentに渡して、というビューオブジェクトのメンバーをcourses.htmlページに表示できます。親コンポーネントのオブジェクトを子コンポーネントにAngular 2で渡すにはどうすればよいですか？
export class HousingAppComponent {
views: Object[] = [
{
name: "Courses",
description: "Show the courses",
icon: "assignment"
},
{
name: "Users",
description: "Check your Progress",
icon: "account_circle"
}
];
子コンポーネントにデータを渡す最も簡単な方法は、property bindingです。 HousingAppComponentのビューは、viewsプロパティをCoursesComponentに渡します。
住宅-app.component.html：
<courses [someData]="views"></courses>
courses.component.ts：
import {Component, Input} from '@angular/core';
@Component({
...
})
export class CoursesComponent {
@Input() someData: any;
}
[someData]="views"表記は、あなたが表現してCoursesComponent.someDataプロパティを設定していることを意味し、以下を参照してください。引用符の間で評価されます。それはHousingAppComponent.viewsプロパティとして"views"を評価します。
あなたは親に子の参照を持っており、任意のデータを渡すためにそれを使用する@viewchild注釈を使用することができます。子がngAfterViewInitライフサイクルイベントの後にのみ利用可能になるわけではありません。
@Viewchild(CourseComponent) cc:CourseComponent cc.Course = data
また、HTMLに結合角度データを介してデータを渡すことができます。
子コンポーネントの入力プロパティを使用します（https://angular.io/docs/ts/latest/guide/template-syntax.html#!#inputs-outputs）。文字列、数値、ブール値などのプリミティブ型に加えて、オブジェクトや配列などの参照型を渡すことができます。 –
プランナーに私を見せてもらえますか？私は試しましたが、動作していません – chyangba
@リッチの答えはあなたのために働く必要があります。それは私に知らせていない場合。 –