Angolare 2, passaggio dell'oggetto completo come parametro

Question

Ho studiato angolare 2 e sto avendo un problema.

In realtà, in realtà, mi passano ogni proprietà componente per il modello come segue:

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; 


} 

Mi chiedevo se posso passare l'oggetto completo direttamente all'interno del modello con il passare ogni proprietà?

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

Answer 1

Sì, è del tutto normale passare l'intero oggetto come una proprietà.

La sintassi è la stessa, quindi è sufficiente creare una proprietà per l'intero oggetto.

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

Ecco un esempio: http://www.syntaxsuccess.com/viewarticle/recursive-treeview-in-angular-2.0

Answer 2

Non c'è nessun problema a farlo. È possibile scegliere entrambe le sintassi:

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

o

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

e la rilegatura:

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

qualcosa che devi avere in mente però, è che quando si passa un oggetto presente modo, si sta passando un riferimento all'oggetto. Ciò significa che qualsiasi modifica apportata all'oggetto nel "bambino" Componente, si rifletterà nella Component Object "padre":

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

} 

L'eccezione a questa è se si assegna un oggetto diverso. In questo caso non si riflettono in "padre" dei componenti, in quanto non è più lo stesso riferimento all'oggetto:

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

}