typescript - Angular2 嵌套组件和模板层次结构

Question

Iv'e 最近开始了一个新项目，并决定给 Angular 2 一个机会。 作为一名前 Backbone 开发人员，我现在面临的工作类型对我来说非常陌生。

我正在尝试构建一个非常简单的应用程序:我想要一个教室对象，并在其中包含一个学生列表。 在我看来，每个组件(类、学生)都应该是不同的组件，这样每个组件都有自己的模板。

我希望将模板完全分开，并在类模板上循环遍历学生并渲染学生模板。

例如: 我的类组件会喜欢这样: 从 '@angular/core' 导入 {Component, OnInit}; 从'app/student.component'导入{Student}；

@Component({
  selector      :   'classroom',
  templateUrl   :   'app/classroom.component.html',
  directives    :   [Classroom]
})

export class MainContainer implements OnInit {
  students : Student[]; // assume I have an array of students here
  constructor() {}
}

类模板将如下所示:

<div>
    <student *ngFor="let student of students"></student>
</div>

学生组件:

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

@Component({
  selector      :   'student',
  templateUrl   :   'build/component/main-box/student.component.html'
})

export class Student {
  name : string;
  id: number;
  grade:number;
  constructor() {
  }
};

学生模板，简单如下:

<div>
      name : {{name}}
      id : {{id}}
      grade : {{grade}}
</div>

但是上面的代码没有显示任何内容。 似乎学生数据没有传递给学生对象。 我见过一些将整个对象向下传递的示例，如下所示:

[student]="student"

但是感觉真的不对。例如，在 Backbone 中，我将渲染父 View ，并在其中附加所有 subview 。 这里感觉很奇怪。

我见过的另一个解决方案是简单地将学生模板添加到类模板中，而不是将它们保存在单独的文件中。 我必须说，我真的非常不喜欢这种做法，因为我相信这些组件不应该一起存在于同一个文件中。

还有一点，@Input() 代表什么？我从文档中并没有真正理解为什么 @Input() 可以访问数据。

在这一点上我更困惑:]我真的很感激一些提示和您的反馈，并学习一些处理此类任务的良好实践。

非常感谢!

Answer 1

您的 <student> 的每个实例标签有一个关联的 Student包含其数据的对象。然而，正如目前所写，Student对象不会从任何地方获取任何数据 - 它只是放在那里并带有空值。 Angular 不会对您希望其数据来自何处进行任何假设，存在各种可能性，并且它不想妨碍。

所以，你必须告诉 Angular 你想要 Student 的位置从中获取数据的对象。 @Input是做到这一点的一种方法。当您使用 @Input 标记组件的成员变量时，您告诉 Angular 该变量的值应该来自关联模板标记的同名属性。如果不指定@Input ，Angular 不会在属性和变量之间建立任何关系。

完成此操作后，您需要实际提供所述属性。例如，提供 @Input name 的值，你可以输入 [name]="someName"在 <student>标签。

指令*ngFor="let student of students"不设置任何属性。它创建一个名为 student 的变量它在模板中该标记的范围内可用，但不会自动在其他任何地方使用，即使在子模板中也是如此。片段[student]="student"会将该变量分配给同名的属性，然后学生模板就可以将其用作 @Input变量。

我可能是错的，但我不认为添加 [student]="student"您的代码实际上会起作用。也许 Angular 会识别匹配的名称并替换整个组件对象，但我不这么认为。

您应该做的是将数据和组件类分开。所以你会有 Student作为一个数据类，其字段已写入但没有注释，比方说 StudentDisplay与 @Component注释和 @Input Student 类型的成员变量。然后将该变量连接到一个属性，并根据该变量编写学生模板。