ボタンをクリックしてビューを変更するにはどうすればよいですか？

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> 

ここでは、（実際に、それは非常に簡単です）私のタブの実装を持っている：

タブコンポーネント（タブコンテナ）：

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]); 
     } 
    } 

} 

とタブコンポーネント：

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; 

そしてちょうどその変数を変更します。

必要に応じて、これらのセクションにアニメーションを追加することができます。 視覚的にどのように表示されるかによって異なります。