Я изучаю angular 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>
Да, полностью передать весь объект как свойство.
Синтаксис один и тот же, поэтому просто создайте свойство для всего объекта.
@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
Нет никаких проблем при выполнении этого. Вы можете выбрать оба синтаксиса:
@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
};
}
}