कोणीय 2 सेवा प्रतिक्रिया के अनुसार गतिशील रूप से टेम्पलेट का चयन करें

Question

मेरे पास "नोड" नामक एक घटक है जो एक पोस्ट प्रदर्शित करना चाहिए, लेकिन मेरे पास एक पोस्ट प्रकार से अधिक है और प्रत्येक प्रकार का अपना दृश्य (लेआउट) है।

इसलिए इस घटक में एक आईडी पैरामीटर है जिसका उपयोग किसी सेवा से पोस्ट प्रतिक्रिया प्राप्त करने के लिए किया जाएगा, फिर पोस्ट प्रकार के अनुसार इसे सही लेआउट प्रदर्शित करना चाहिए।

पूर्व: localhost/test_app/node/123 जहां 123 आईडी पैरामीटर है।

दृष्टिकोण 1: गतिशील घटक लोडर का उपयोग कर: tamplate

@Component({ 
    selector: 'node', 
    directives: [Post, Project], 
    template: ` 
    <post *ngIf="response.post.post_type == 'post'" content="response.post"></post> 
    <project *ngIf="response.post.post_type == 'project'" content="response.post"></project> 
    `, 
}) 

export class Node{ 

    id: number; 
    response: any; 
    constructor(private _param: RouteParams, 
       public service: Service 
){ 
    this.id = +_param.get('id'); 
    } 

    ngOnInit(){ 
    this.service.get(this.id).subscribe(
     res=> this.response = res.json() 
    ); 
    } 

} 

दृष्टिकोण 2 में ngIf का उपयोग कर।

@Component({ 
    selector: 'node', 
    directives: [Post, Project], 
    template: '<div #container></div>' 
}) 

export class Node{ 

    id: number; 
    response: any; 

    constructor(private _param: RouteParams, 
       public service: Service, 
       private loader:DynamicComponentLoader, 
       private elementRef:ElementRef 
){ 
    this.id = +_param.get('id'); 
    } 

    ngOnInit(){ 
    this.service.get(this.id).subscribe(
     res=> { 
      this.response = res.json(); 
      this.renderTemplate(); 
     } 
    ); 
    } 

    renderTemplate(template) { 
    this.loader.loadIntoLocation(
     this.getCorrectTemplate(), 
     this.elementRef, 
     'container' 
    ) 
    } 

    getCorrectTemplate(){ 
    if(this.response.post.post_type == "post"){ 
     return '<post content="response.post"></post>'; 
    } 
    else{ 
     return '<project content="response.post"></project>'; 
    } 
    } 

} 

मुझे आश्चर्य है कि कौन सा दृष्टिकोण अधिक कुशल है या यदि कोई बेहतर दृष्टिकोण है, तो कृपया इसे साझा करें।

Answer 1

यदि आपके पास संभावित टेम्पलेट्स का सीमित सेट है तो *ngIf या *ngSwitch एक अच्छा तरीका है। यह आपको माता-पिता और बच्चे के बीच [] और () बाइंडिंग का उपयोग करने की अनुमति देता है।

यदि आपके पास टेम्पलेट्स का एक सेट है जो स्थिर रूप से अज्ञात है और उदाहरण के लिए पैरामीटर द्वारा प्रदान किया गया है तो *ngIf काम नहीं करता है। फिर ViewContainerRef.createComponent() (DynamicComponentLoader को प्रतिस्थापित करता है) सही दृष्टिकोण है। उदाहरण के लिए Angular 2 dynamic tabs with user-click chosen components