根据 angular 中的用户操作动态切换 html 模板 2

Question

使用 Angularjs 1.x，您可以轻松地在 edit/readonly 模式之间点击按钮切换 html 模板。 ng-include 指令是关键。

<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函数执行这段代码：

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

这再次导致这些模板之一在 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。

如何使用 Angular 2 RC4 实现相同的功能？

Answer 1

你需要稍微改变一下你对这件事的看法。它不仅仅是一个模板，它是应用程序组件树的一个分支。从组件的角度考虑它以及它们在您的应用程序中的用途。

在您的情况下，如果您有 "edit" 和 "display" 视图，那么使用编辑和显示组件设计您的应用并使用 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>

UDP。这是该方法的一个简单演示：

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

Answer 2

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

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

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

因此您可以按照我的 demo plunker 中的说明尝试使用此功能（已更新为 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;
    }
}

根据 angular 中的用户操作动态切换 html 模板 2

Switch html templates dynamically on user action in angular 2

angular2-template

angular