Angular 2, volles Objekt als Parameter übergeben

Question

Ich studiere Winkel 2 und ich habe ein Problem.

In der Tat, eigentlich gehe ich jede Komponente Eigenschaft auf die Vorlage wie folgt vor:

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; 


} 

ich mich gefragt, ob ich die volle Objekt direkt in der Vorlage mit dem Führen jedes Objekt passieren kann?

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

Answer 1

Ja ist es völlig in Ordnung, das gesamte Objekt als eine Eigenschaft zu übergeben.

Die Syntax ist die gleiche, also erstellen Sie einfach eine Eigenschaft für das gesamte Objekt. Hier

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

ist ein Beispiel: http://www.syntaxsuccess.com/viewarticle/recursive-treeview-in-angular-2.0

Answer 2

Es gibt kein Problem auf, es zu tun. Sie können beide Syntaxen wählen:

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

oder

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

und die Bindung:

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

Etwas, das man allerdings im Auge haben müssen, ist, dass bei der Übergabe eines Objekts dieses So übergeben Sie eine Referenz auf das Objekt. Dies bedeutet, dass jede Änderung, die Sie in der „Kind“ Komponente zum Objekt zu machen, wird in dem „Eltern“ Component Objekt reflektiert werden:

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"; 
    } 

} 

Die Ausnahme ist, wenn Sie ein anderes Objekt zuweisen. In diesem Fall wird reflektieren sie nicht in „Eltern“ Komponente, da es nicht mehr das gleiche Objekt Referenz:

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 
     }; 
    } 

}