Angular2ネストされたコンポーネントとテンプレート階層

Question

Iv'eは最近新しいプロジェクトを開始し、Angular 2にチャンスを与えることに決めました。 元のバックボーン開発者として、私は今、私に本当に新しい仕事の種類に直面しています。生徒のリストを、私はクラスの部屋のオブジェクトを持つようにしたい、とその中：

は、私は非常にシンプルなアプリを構築しようとしています。 私の見解では、それぞれ（教室、学生）はそれぞれのコンポーネントがそれ自身のテンプレートを持つように異なるコンポーネントでなければなりません。

は、私は完全に分離したテンプレートを持つことを望む、と教室のテンプレート上の学生をループすると、学生のテンプレートをレンダリングします。

例： 私の教室コンポーネントは次のようになります： {Component、OnInit} from '@ angular/core'; {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では、親ビューをレンダリングし、その内部にすべての子ビューを追加します。 ここでそれは奇妙に感じます。

もう1つの解決策は、生徒のテンプレートを別のファイルに保持するのではなく、単に教室のテンプレートに追加することです。 私は、これらのコンポーネントが同じファイルで一緒に生きていけないと信じているので、私は本当にこのプラクティスが気に入らないと言わなければなりません。

もう1つのこと、何をdoest @Input()の略ですか？私は実際に文書からなぜ@Input()がデータにアクセスするのか理解できませんでした。この時点で

私はないよりも混乱しています：]私は実際にいくつかのヒントやご意見を感謝し、そのようなタスクをdeallingためのいくつかの優れた実践を学ぶでしょう。

ありがとうございます！

Answer 1

あなた<student>タグの各インスタンスは、そのデータが含まれている関連するStudentを目的としています。しかし、現在書かれているように、Studentオブジェクトはどこからでもデータを取得しません。空の値でそこに置かれます。 Angularは、そのデータがどこから来たがっているかについては何も想定していません。あらゆる可能性があり、途方もないことを望んでいません。

だから、あなたはあなたがから自分のデータを得るためにあなたのStudentオブジェクトを配置したい場所の角を伝える必要があります。@Inputはこれを行う1つの方法です。コンポーネントのメンバ変数に@Inputというタグを付けると、その変数の値は関連するテンプレートタグの同じ名前のプロパティから取得する必要があることをAngularに伝えます。 @Inputを指定しない場合、Angularはプロパティと変数の間に関係を作成しません。

これを実行したら、実際に前記プロパティを提供する必要があります。たとえば、@Input nameの値を入力する場合は、タグに[name]="someName"と入力します。

指示文*ngFor="let student of students"はプロパティを設定しません。 studentという名前の変数がテンプレート内のそのタグの有効範囲にありますが、子テンプレートでも他の場所では自動的に使用されません。スニペット[student]="student"は、その変数を同じ名前のプロパティに割り当てます。これにより、生徒のテンプレートは@Input変数として使用できます。

私は間違っている可能性がありますが、私は実際に動作するように[student]="student"をコードに追加するとは思わないと思います。たぶん、Angularは一致する名前を認識し、コンポーネントオブジェクト全体を置き換えますが、そうは思わないでしょう。

データとコンポーネントのクラスを分離する必要があります。したがって、フィールドは書かれていても注釈がないデータクラスとしてStudentがあり、StudentDisplayと@Componentアノテーション、@Inputメンバ変数がStudentであるとしましょう。次に、その変数をプロパティに接続し、その変数に関して学生のテンプレートを書きます。