Commutateur de modèles html de façon dynamique sur action de l'utilisateur dans angulaire 2

Avec Angularjs 1.x vous pouvez facilement basculer modèles html sur un bouton, cliquez sur modifier/readonly modus. La ng-inclure la directive a été la clé.

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

L'obtenir getTemplate fonction exécute ce code:

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

qui conduisent à l'un de ces modèles à être actif dans l'INTERFACE utilisateur:

AFFICHAGE

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

MODIFIER

<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/

Angulaire 2 RC 4 il n'existe pas de n-include.

Comment ferais-je de la même fonction, avec juste Angulaire 2 RC4 ?

OriginalL'auteur Pascal | 2016-07-24

  1. 18

    Je voudrais tirer parti de ngTemplateOutlet directive de le faire.

    Depuis la version de 2.0.0-rc.2 (2016-06-15) contexte a été ajouté à NgTemplateOutlet

    de sorte que vous pouvez essayer d'utiliser cette fonction comme décrit dans mon démo plunker (mis à jour pour 4.x.x)

    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>

    composant.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;
    }
}
    Génial démo! Et le code est très similaire à angulaires 1.X!!! Pouvez-vous me dire ce que la déclaration d': @ViewChild('editTmpl') editTmpl: TemplateRef<aucun> , je suis en train de faire tapuscrit depuis quelques semaines maintenant et je n'ai jamais vu cette syntaxe.
    C'est juste l'accès à un modèle à l'intérieur de la classe du composant angular.io/docs/ts/latest/api/core/index/TemplateRef-class.html
    ok merci. Je préfère votre solution beaucoup plus de dfsq solution de contournement pour angulaires 2 avant RC2 et votre mise en œuvre angulaire RC2+ 🙂
    Pouvez-vous s'il vous plaît dites-moi pourquoi vous n': ce.selected = Objet.attribuer({}, contact); Pourquoi ne pas le faire.selected = contact ? Sa en raison de la liaison bidirectionnelle et la fonction annuler le droit?
    C'est une copie de l'objet. Oui ses pour le droit d'annuler le comportement. Dans ce cas, l'élément de matrice ne change pas

    OriginalL'auteur yurzui

  2. 2

    Vous avez besoin de changer la façon dont vous pensez de ce genre de choses un peu. Ce n'est pas seulement un modèle, c'est une branche de la composante de l'arbre. Pensez-y en termes de composants et à quoi ils servent dans votre application.

    Dans votre cas, si vous avez "modifier" et "affichage", de points de vue, alors il serait judicieux de concevoir votre application avec d'éditer et d'afficher les composants et de les transférer avec ngIf ou ngSwitch. Chacun de ces composants devront être en mesure de prendre le modèle de données de propriété (Input) et de rendre lui-même la manière dont elle a besoin.

    De sorte qu'il pourrait être quelque chose comme ceci:

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

    UDP. Ici est une simple démonstration de l'approche:

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

    Si vous créez un composant à l'aide du sélecteur de contact-affichage/contact-de modifier et d'une directive [contact]?
    Non, vous n'avez pas besoin d'une directive. C'est juste un composant avec la propriété de contact (ou autre). Je vais mettre à jour la réponse.
    De vérifier la démo, je l'ai créé de la façon dont je le ferais.
    Après 3 mois, je dois d'accord avec votre affirmation:" il serait logique pour la conception de votre application avec d'éditer et d'afficher les composants" d'autre du composant wrapper a 300 lignes 😉
    juste de signalisation que votre démo ne semble pas charger plus.

    OriginalL'auteur dfsq