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

Question

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

我正在尝试构建一个非常简单的应用程序：我想要一个课室对象，并在其中列出学生列表。 在我看来，他们每个人（教室，学生）应该是不同的组件，这样每个组件都有自己的模板。

我希望将模板完全分开，并在教室模板上循环显示学生并呈现学生模板。

例如： 我的课堂组件想要这样： 从'@ 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> 

但上面代码什么也没有显示。 似乎学生数据没有传递给学生对象。 Iv'e看到一些例子，传递整个对象了，是这样的：

[student]="student" 

但感觉真的错了。例如，在Backbone中，我将呈现父视图，并在其中添加所有子视图。 这里感觉很奇怪。

另一个解决方案Iv'e看到的仅仅是将学生模板添加到教室模板，而不是将它们保存在单独的文件中。 我必须说我真的不喜欢这种做法，因为我相信这些组件应该不会一起生活在同一个文件中。

另一件事，@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。然后将该变量连接到一个属性，并根据该变量编写学生模板。