角2、パラメータとして完全なオブジェクトを渡す

Question

角度2を学習し、問題がある。

は実際には、実際に、私は次のようなテンプレートに、各コンポーネントのプロパティを渡す：私は、各プロパティを渡すと、テンプレートの内部で直接、完全なオブジェクトを渡すことができれば

import {Component, bootstrap, NgFor,NgModel} from 'angular2/angular2'; 
import {TodoItem} from '../item/todoItem'; 


@Component({ 
    selector: 'todo-list', 
    providers: [], 
    templateUrl: 'app/todo/list/todoList.html', 
    directives: [NgFor,TodoItem,NgModel], 
    pipes: [], 
    styleUrls:['app/todo/list/todoList.css'] 
}) 
export class TodoList { 

    list:Array<Object>; 

    constructor(){ 
    this.list = [ 
     {title:"Text 1", state:false}, 
     {title:"Text 2", state:true} 
    ]; 
    } 
} 



<todo-item [title]="item.title" [state]="item.state" *ng-for="#item of list"></todo-item> 

import {Component, bootstrap, Input} from 'angular2/angular2'; 


@Component({ 
    selector: 'todo-item', 
    providers: [], 
    templateUrl: 'app/todo/item/todoItem.html', 
    directives: [], 
    pipes: [], 
    styleUrls:['app/todo/item/todoItem.css'] 
}) 
export class TodoItem { 

    @Input() 
    title:String; 

    @Input() 
    state:Boolean; 


} 

私は不思議でしたか？

<todo-item [fullObj]="item" *ng-for="#item of list"></todo-item> 

Answer 1

はいオブジェクト全体をプロパティとして渡すことはまったく問題ありません。

構文は同じですので、オブジェクト全体のプロパティを作成してください。ここで

@Component({ 
    selector: 'my-component' 
}) 
export class MyComponent{ 
    @Input() item; 
} 
<my-component [item]=item></my-component> 

は一例です：それを行うには何の問題はhttp://www.syntaxsuccess.com/viewarticle/recursive-treeview-in-angular-2.0

Answer 2

はありません。

@Component({ 
    selector: 'my-component', 
    inputs: ['item: item'] 
}) 
export class TodoItem { 
    item: { title: string, state: boolean }; 
} 

または

@Component({ 
    selector: 'my-component' 
}) 
export class TodoItem { 
    @Input() item: { title: string, state: boolean }; 
} 

と結合：あなたは両方の構文を選択することができますが、のに心を持っている必要があり

<todo-item [item]="item" *ng-for="#item of list"></todo-item> 

何かを、であるそのオブジェクトにこれを渡すときオブジェクトにの参照を渡しています。これは、あなたが「子」コンポーネントでオブジェクトに対して行った変更は、「親」コンポーネントオブジェクトに反映されることを意味します：あなたが別のオブジェクトを割り当てると、これに

export class TodoItem implements OnInit { 

    ngOnInit() { 
     //This is modifying the object in "parent" Component, 
     //as "this.item" holds a reference to the same "parent" object 
     this.item.title = "Modified title"; 
    } 

} 

例外があります。

export class TodoItem implements OnInit { 

    ngOnInit() { 
     //This will not modify the object in "parent" Component, 
     //as "this.item" is no longer holding the same object reference as the parent 
     this.item = { 
      title: 'My new title', 
      state: false 
     }; 
    } 

}