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。然後將該變量連接到一個屬性，並根據該變量編寫學生模板。