在角度2中根据用户操作动态切换html模板

问题描述

使用Angularjs 1.x，您可以轻松地在单击按钮时在编辑/只读方式之间切换html模板. ng-include指令是关键.

With Angularjs 1.x you could easily switch html templates on a button click between edit/readonly modus. The ng-include directive was the key.

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

get getTemplate函数执行以下代码:

The get getTemplate function executes this code:

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

再次导致其中一个模板在用户界面中处于活动状态:

which again lead to one of those templates to be active in the UI:

显示

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

对于Angular 2 RC 4，不存在n-include.

With Angular 2 RC 4 there exist no n-include.

我仅使用Angular 2 RC4怎么做相同的功能?

How would I do the same feature just with Angular 2 RC4 ?

推荐答案

我会利用ngTemplateOutlet指令来做到这一点.

I would leverage ngTemplateOutlet directive to do that.

自 2.0.0-rc.2(2016-06-15)版本开始，上下文已添加到NgTemplateOutlet

Since version of 2.0.0-rc.2 (2016-06-15) context was added to NgTemplateOutlet

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

，因此您可以尝试按照我的 演示弹奏者中所述使用此功能> (更新为 4.xx )

so you can try to use this feature as described in my demo plunker (updated to 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>

component.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;
    }
}

这篇关于在角度2中根据用户操作动态切换html模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！