Angular 2, przekazywanie pełnego obiektu jako parametru

Question

Studiuję kątowe 2 i mam problem.

W rzeczywistości, faktycznie, ja przejść każdy właściwość komponentu do szablonu jak następuje:

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; 


} 

Zastanawiałem się, czy mogę przekazać pełną obiekt bezpośrednio wewnątrz szablonu z przechodzącej każdą właściwość?

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

Answer 1

Tak, to jest całkowicie w porządku, aby przekazać cały obiekt jako własność.

Składnia jest taka sama, więc po prostu utwórz właściwość dla całego obiektu.

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

Oto przykład: http://www.syntaxsuccess.com/viewarticle/recursive-treeview-in-angular-2.0

Answer 2

Nie ma problemu na to robić. Można wybrać zarówno składni:

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

lub

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

i wiązanie:

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

coś trzeba mieć na uwadze, iż, jest to, że podczas przechodzenia obiekt ten sposób, podajesz odniesienie do obiektu do obiektu. Oznacza to, że wszelkie zmiany wprowadzone do obiektu w „dziecko” składnik, zostaną odzwierciedlone w „macierzystym” obiektu komponent:

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

} 

Wyjątkiem od tej zasady jest sytuacja, gdy można przypisać inny obiekt. W takim przypadku nie będzie odzwierciedlać w „macierzystym” komponent, jako że nie jest już takie samo odwołanie do obiektu:

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

}