Angulaire 2, passant l'objet complet en paramètre

J'étudie angulaire 2 et je m avoir un problème.

En fait, en fait, je passe chaque composant de la propriété pour le modèle comme suit :

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;


}

Je me demandais si je peux passer l'intégralité de l'objet directement à l'intérieur du modèle avec le passage de chaque propriété ?

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

source d'informationauteur Thomas thomas

  1. 21

    Oui, il est tout à fait bien passer la totalité de l'objet en tant que propriété.

    La syntaxe est la même, il suffit donc de créer une propriété pour l'ensemble de l'objet.

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

    Voici un exemple: http://www.syntaxsuccess.com/viewarticle/recursive-treeview-in-angular-2.0

  2. 7

    Il n'y a pas de problème à le faire. Vous pouvez choisir les deux syntaxes:

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

    ou

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

    et de liaison:

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

    Quelque chose que vous devez avoir à l'esprit quec'est que lors du passage d'un objet de cette manière, vous êtes de passage à un référence à l'objet. Cela signifie que toute modification que vous apportez à l'objet dans la partie "enfant" Composant, sera reflété dans le "parent" de la Composante de l'objet:

    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'exception à cette règle est si vous affectez un objet différent. Dans ce cas, il ne reflète en "parent" Composant, car il n'est plus la même référence de l'objet:

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

}