Iv'e最近开始一个新项目,并决定给Angular 2一个机会。 作为一名前骨干开发人员,我现在面临着对我来说真的很陌生的工作类型。Angular2嵌套组件和模板层次结构
我正在尝试构建一个非常简单的应用程序:我想要一个课室对象,并在其中列出学生列表。 在我看来,他们每个人(教室,学生)应该是不同的组件,这样每个组件都有自己的模板。
我希望将模板完全分开,并在教室模板上循环显示学生并呈现学生模板。
例如: 我的课堂组件想要这样: 从'@ 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()
可以访问数据。
在这一点上,我比以下更困惑:]我真的很感激一些技巧和你的反馈,并学习一些良好的做法,以消除这些任务。
非常感谢!
伟大的,它的工作原理,但有没有其他方式来做到这一点?我只是好奇 – superuser123
尽管感谢您的回答,但我会在明天之前将其打开,以便听取更多意见,如果没有人发言,我会批准它:) – superuser123
@ superuser123如果您将子模板内联到同一个文件中,而不是如果将它分开,'ngFor'指令中的'student'变量将处于范围之内,并且可以直接使用而不需要属性。除此之外,我能想到的只有各种方法都是毫无意义的错误。 – Douglas