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

Question

这里HousingAppComponent是我的父类，我想将此视图对象传递给我的子组件CoursesComponent，以便可以在courses.html页面中显示该视图对象的成员。

export class HousingAppComponent {


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

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

Answer 1

将数据传递给子组件的最简单方法是使用属性绑定。HousingAppComponent的视图会将views属性传递给CoursesComponent。请参阅以下内容：

housing-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属性。