Question

我最近开始了一个新项目，并决定给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中，我将渲染父视图，并在其中附加所有子视图。这感觉很奇怪。

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

另一件事，什么是@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注释和{{1}类型@Input的成员变量。然后将该变量挂钩到属性，并根据该变量编写学生模板。

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

1 个答案: