如何在Angular 2中将对象从“父”组件传递到“子”组件？

Question

Here HousingAppComponent is my parent class and I want to pass this view object to my child component CoursesComponent so that I can display the members from the view object in the courses.html page.

export class HousingAppComponent {


views: Object[] = [
{
  name: "Courses",
  description: "Show the courses",
  icon: "assignment"
},

{
  name: "Users",
  description: "Check your Progress",
  icon: "account_circle"
}
];

Answer 1

The easiest way to pass data to a child component is with property binding . The view of HousingAppComponent will pass the views property to CoursesComponent. See the following:

housing-app.component.html:

<courses [someData]="views"></courses>

courses.component.ts:

import {Component, Input} from '@angular/core';

@Component({
    ...
})
export class CoursesComponent {
    @Input() someData: any;
}

The [someData]="views" notation means that you are setting the CoursesComponent.someData property with an expression that is evaluated between the quotation marks. It evaluates "views" as the HousingAppComponent.views property.

Answer 2

You can use @viewchild annotations to have a reference of child in parent and use that to pass any data. Please not the child will be available only after ngAfterViewInit lifecycle event.

@Viewchild(CourseComponent) cc:CourseComponent cc.Course = data

You can also pass data via angular data binding in HTML.