कोणीय 2, पैरामीटर

Question

के रूप में पूर्ण ऑब्जेक्ट पास कर रहा है मैं कोणीय 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> 

Answer 1

हां पूरी वस्तु को संपत्ति के रूप में पारित करने के लिए बिल्कुल ठीक है।

वाक्यविन्यास समान है, इसलिए बस संपूर्ण वस्तु के लिए एक संपत्ति बनाएं। http://www.syntaxsuccess.com/viewarticle/recursive-treeview-in-angular-2.0

Answer 2

इसमें कर रही पर कोई समस्या नहीं है:

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

यहाँ एक उदाहरण है।

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

}