Angularjs 1.x के साथ कोणीय 2

Question

में उपयोगकर्ता क्रिया पर गतिशील रूप से HTML टेम्पलेट स्विच करें। आप संपादन/रीडोनली मोडस के बीच एक बटन क्लिक पर आसानी से HTML टेम्पलेट्स स्विच कर सकते हैं। एनजी-शामिल निर्देश कुंजी था।

$scope.getTemplate = function (contact) { 
    if (contact.id === $scope.model.selected.id) return 'edit'; 
    else return 'display'; 
}; 

जो फिर उन टेम्पलेट्स में से एक के लिए नेतृत्व यूआई में सक्रिय होने के लिए:

<table> 
    <thead> 
     <th>Name</th> 
     <th>Age</th> 
     <th></th> 
    </thead> 
    <tbody> 
     <tr ng-repeat="contact in model.contacts" ng-include="getTemplate(contact)"> 
     </tr> 
    </tbody> 
</table> 

प्राप्त getTemplate समारोह इस कोड निष्पादित

प्रदर्शन

<script type="text/ng-template" id="display"> 
     <td>{{contact.name}}</td> 
     <td>{{contact.age}}</td> 
     <td> 
      <button ng-click="editContact(contact)">Edit</button> 
     </td> 
    </script> 

संपादित करें

<script type="text/ng-template" id="edit"> 
    <td><input type="text" ng-model="model.selected.name" /></td> 
    <td><input type="text" ng-model="model.selected.age" /></td> 
    <td> 
     <button ng-click="saveContact($index)">Save</button> 
     <button ng-click="reset()">Cancel</button> 
    </td> 
</script> 

https://jsfiddle.net/benfosterdev/UWLFJ/

कोणीय 2 आर सी 4 के साथ कोई एन-शामिल वहाँ मौजूद हैं।

मैं कोणीय 2 आरसी 4 के साथ एक ही सुविधा कैसे करूं?

Answer 1

मैं लाभ उठाने होता है कि ऐसा करने के लिए ngTemplateOutlet निर्देश: यहाँ दृष्टिकोण का एक सरल डेमो है।

के बाद से 2.0.0-rc.2 (2016/06/15) संदर्भ के संस्करण NgTemplateOutlet

• https://github.com/angular/angular/commit/164a091

को जोड़ा गया है, ताकि आप के रूप में इस सुविधा का उपयोग करने के लिए कोशिश कर सकते हैं में वर्णित मेरी demo plunker (अद्यतन 4.xx को)

template.html

<table> 
    <thead> 
     <th>Name</th> 
     <th>Age</th> 
     <th></th> 
    </thead> 
    <tbody> 
     <tr *ngFor="let contact of contacts; let i = index"> 
      <ng-template [ngTemplateOutlet]="getTemplate(contact)" 
      [ngOutletContext]="{ $implicit: contact, index: i }"></ng-template> 
     </tr> 
    </tbody> 
</table> 


<ng-template #displayTmpl let-contact> 
    <td>{{contact.name}}</td> 
    <td>{{contact.age}}</td> 
    <td> 
     <button (click)="editContact(contact)">Edit</button> 
    </td> 
</ng-template> 

<ng-template #editTmpl let-i="index"> 
    <td><input type="text" [(ngModel)]="selected.name" /></td> 
    <td><input type="text" [(ngModel)]="selected.age" /></td> 
    <td> 
     <button (click)="saveContact(i)">Save</button> 
     <button (click)="reset()">Cancel</button> 
    </td> 
</ng-template> 

घटक।ts

import { Component, ViewChild, TemplateRef } from '@angular/core'; 

interface Contact { 
    id: number; 
    name: string; 
    age: number 
} 

@Component({ 
    .... 
}) 
export class App { 
    @ViewChild('displayTmpl') displayTmpl: TemplateRef<any>; 
    @ViewChild('editTmpl') editTmpl: TemplateRef<any>; 

    contacts: Array<Contact> = [{ 
      id: 1, 
      name: "Ben", 
      age: 28 
     }, { 
      id: 2, 
      name: "Sally", 
      age: 24 
     }, { 
      id: 3, 
      name: "John", 
      age: 32 
     }, { 
      id: 4, 
      name: "Jane", 
      age: 40 
     }]; 

    selected: Contact; 

    getTemplate(contact) { 
     return this.selected && this.selected.id == contact.id ? 
     this.editTmpl : this.displayTmpl; 
    } 

    editContact(contact) { 
     this.selected = Object.assign({}, contact); 
    } 

    saveContact (idx) { 
     console.log("Saving contact"); 
     this.contacts[idx] = this.selected; 
     this.reset(); 
    } 

    reset() { 
     this.selected = null; 
    } 
} 

Answer 2

आपको इस चीज़ के बारे में सोचने के तरीके को बदलने की जरूरत है। यह सिर्फ एक टेम्पलेट नहीं है, यह एप्लिकेशन घटक पेड़ की एक शाखा है। घटकों के संदर्भ में इसके बारे में सोचें और वे आपके आवेदन में किस उद्देश्य से सेवा करते हैं।

आपके मामले में, यदि आपके पास "संपादन" और "प्रदर्शन" दृश्य हैं, तो यह आपके ऐप को संपादन और डिस्प्ले घटकों के साथ डिज़ाइन करने और उन्हें ngIf या ngSwitch के साथ स्विच करने के लिए समझ में आता है। उन घटकों में से प्रत्येक को एक संपत्ति के रूप में डेटा मॉडल (Input) लेने में सक्षम होना चाहिए और जिस तरह से इसकी आवश्यकता है उसे प्रस्तुत करें।

<tbody> 
    <tr *ngFor="let contact of model.contacts"> 
    <contact-display *ngIf="getView(contact) === 'display'" [contact]="contact"></contact-display> 
    <contact-edit *ngIf="getView(contact) === 'edit'" [contact]="contact"></contact-edit> 
    </tr> 
</tbody> 

यूडीपी:

तो यह कुछ इस तरह हो सकता है।

http://plnkr.co/edit/drzI1uL4kkKvsrm0rgOq?p=info