Question

我有3个步骤的注册表。应在另一个视图上单击“按下”按钮更改表单视图。

如何在Angular 2中实现？我试图使用路由，但它取代了整个页面。

Answer 1

我正在为我的应用程序创建该功能，我选择的解决方案是使用选项卡。这里有一个基本的例子（请注意，标签组件是由我创建的，但您可以使用prime-ng中的标签组件）。关键是下一个按钮只显示下一个选项卡，隐藏当前选项卡。如果您使用的是模型驱动表单，则可以轻松地前后保持表单字段值：

<tabs>
    <tab title="Patient Information">
        <patient-data (onValid)="setPatientValid($event)"></patient-data>
    </tab>
    <tab title="Tab 2" [activable]="isPatientInformationValid()"></tab>
</tabs>

这里有我的标签实现（实际上非常简单）：

Tabs组件（标签容器）：

import { Component, Input, ContentChildren, QueryList, AfterContentInit } from '@angular/core';
import { TabComponent } from './tab.component';

@Component({
    selector: 'tabs',
    template: `
<div class="tabs-container">
    <ul class="nav nav-tabs">
        <li *ngFor="let tab of tabs" [class.active]="tab.active" [class.disabled]="!tab.activable" (click)="selectTab(tab)"><a>{{tab.title}}</a></li>
    </ul>
    <ng-content> </ng-content>
</div>`
})
export class TabsComponent implements AfterContentInit {

    @ContentChildren(TabComponent) tabs: QueryList<TabComponent>

    constructor() { }

    selectTab(tab: TabComponent) {
        if (tab.activable) {
            this.tabs.forEach(tab => tab.active = false);
            tab.active = true;
        }
    }

    ngAfterContentInit() {
        let activeTabs = this.tabs.filter((tab) => tab.active);
        // if there is no active tab set, activate the first
        if (activeTabs.length === 0) {
            this.selectTab(this.tabs.first);
        } else if (activeTabs.length > 1) {
            this.selectTab(activeTabs[0]);
        }
    }

}

Tab组件：

import { Component, OnInit, Input } from '@angular/core';
import { TabsComponent } from './tabs.component';
@Component({
    selector: 'tab',
    template: `
<div *ngIf="active">
    <ng-content></ng-content>
</div>`
})
export class TabComponent implements OnInit {

    @Input() title: string;
    active: boolean=true;
    @Input() activable: boolean=true;

    constructor() {
    }

    ngOnInit() {
    }

}

Answer 2

您可以使用条件类来隐藏/显示表单部分，具体取决于组件中的变量。

HTML：

<div [class.hidden]="selectedSection != 1">
    Form content 1
</div>

<div [class.hidden]="selectedSection != 2">
    Form content 2
</div>

CSS：

.hidden { display: none; }

并在您的组件中：

selectedSection: number = 1;

然后在您想要更改表单部分时更改该变量。

然后，您可以根据需要为这些部分添加动画。取决于你希望它在视觉上真实地呈现。

如何通过按钮更改视图？

2 个答案: