Question

这里的HousingAppComponent是我的父类，我想通过它查看我的子组件CoursesComponent的对象，以便我可以显示来自courses.html页面中view对象的成员。

export class HousingAppComponent {


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

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

Answer 1

将数据传递给子组件的最简单方法是使用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属性。它将"views"评估为HousingAppComponent.views属性。

Answer 2

您可以使用@viewchild注释在父级中引用子级，并使用它来传递任何数据。请不要仅在ngAfterViewInit生命周期事件后才能使用该子项。

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

您还可以通过HTML中的角度数据绑定传递数据。

如何将对象从Parent组件传递给Angular 2中的Child组件？

2 个答案: