router_outlet和向导步骤

Question

让我指出，我非常新手角4

我们有一个很长的过程，用户在我们的系统中注册，他们将不得不通过进入的几个进程启动和/或验证他们的基本信息，教育程度，工作经历等等。为此，我正在尝试执行像流程这样的向导步骤。

我似乎有一些router_outlet的问题，我无法找到解决的办法。

我有一个向导，其中向导步骤正在所有页面上显示，并且router_outlet将更改向导步骤下面的步骤，如下所示。

这里是我开始： app.routing.ts

const appRoutes: Routes = [ 
    { path: '', redirectTo: 'app1', pathMatch: 'full' } 
]; 

app.routing包括在app.module

import { NgModule } from '@angular/core'; 
import { APP_BASE_HREF } from '@angular/common'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { ReactiveFormsModule } from '@angular/forms'; 
import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; 

/*App Root*/ 
import { AppComponent } from './app.component'; 
import { ModalModule } from './Modals/app.modals.module' 
import {App1Module} from './Features/Certification/app1.module' 
//import { Ng2Bs3ModalModule } from 'ng2-bs3-modal/ng2-bs3-modal'; 
import { HttpModule } from '@angular/http'; 
import { applicationRouting } from './app.routing'; 

@NgModule({ 
    imports: [BrowserModule, ReactiveFormsModule, HttpModule, applicationRouting, /*Ng2Bs3ModalModule*/ NgbModule.forRoot(), ModalModule, App1Module], 
    declarations: [AppComponent], 
    providers: [{ provide: APP_BASE_HREF, useValue: '/' }], 
    bootstrap: [AppComponent] 
}) 

这里是我的应用1模块，其中包含了自己的路由：

import { NgModule } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { ReactiveFormsModule } from '@angular/forms'; 
import { Routes, RouterModule } from '@angular/router'; 


import { CustomerInformationService } from '../../Services/cusrtomerInformation.service' 
import { App1Routing } from './app1.routing' 
import {App1Component} from './app1.component' 
import { App1HomeComponent } from './01-Home/app1.home.component'; 
import { App1EmploymentHistory } from './02-employment/app1.employment.component' 



@NgModule({ 
    imports: [BrowserModule, ReactiveFormsModule, App1Routing], 
    declarations: [App1Component, App1HomeComponent, App1EmploymentHistory], 
    providers: [CustomerInformationService], 
    exports:[RouterModule] 
}) 

export class App1Module{} 

H ERE是我app1.routing

import { ModuleWithProviders } from '@angular/core'; 
import { Routes, RouterModule } from '@angular/router'; 
import {App1Component} from './app1.component'; 
import { App1HomeComponent } from './01-Home/app1.home.component'; 
import { App1EmploymentHistory} from './02-employment/app1.employment.component'; 

const appRoutes: Routes = [ 
    { 
     path: 'app1', component: App1Component, children: 
     [ 
      {path: 'app1home', component:App1HomeComponent}, 
      { path: 'employment', component: App1EmploymentHistory } 
     ] 
    }, 
    {path:'', component:App1Component} 
]; 


export const App1Routing: ModuleWithProviders = 
    RouterModule.forChild(appRoutes); 

我的问题与App1Component本身开始..在这里我要保持我的向导步骤总是可见的，然后再加载子组件一次一个当有人点击一个和上一个上。

这里是我的App1.component模板：

<div *ngIf="displayContents != null && displayContents == true"> 

    <ul class='nav nav-wizard'> 
     <li><a href='#step1' data-toggle="tab">1 - Personal Details</a></li> 
     <li><a href='#step2' data-toggle="tab">Step 2</a></li> 
     <li><a href="/fgdf">Step 3</a></li> 
     <li class="active"><a href="/fgdf">Step 4</a></li> 
     <li><a href="/fgdf">Step 5</a></li> 
     <li><a href="/fgdf">Step 6</a></li> 
     <li><a href="/fgdf">Step 7</a></li> 
    </ul> 
    <hr /> 
    <div id="myTabContent" class="tab-content"> 
     <div class="tab-pane fade" id="step1"> 
      <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p> 
     </div> 
     <div class="tab-pane fade active in" id="step2"> 
      <p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.</p> 
     </div> 
    </div> 
</div> 

<router-outlet></router-outlet> 

正如你所看到的，我router_outlet的正下方的向导步骤。现在，当有人访问/ APP1，我想自动加载App1Home成分一个路由器插座，当他们点击下一个时，我想删除App1Home组件并加载下一个App1EmploymentHistory组件。我也希望只需点击一下App1EmploymentHistory组件的延迟加载方法，以便在应用程序初始化时不需要加载组件

我尝试在App1HomeComponent中放置“选择器”，但是当我将该选择器放入App1Component ，它加载App1HomeComponent，但它不会删除该组件，当我使用App1HomeComponent上的下一个按钮导航到App1EmploymentHistory组件时。

我相信我缺少一些概念，因为我非常喜欢角4的新手。

如果有人建议解决这个问题，我将不胜感激。

如果有些东西可以模仿向导步骤，只需点击下一个/上一个按钮就可以加载步骤，我当然不需要发明轮子。我会感谢任何现成的建议，以及我可以适应我的项目。

Answer 1

你的顶部导航可以改成这样：

<ul class='nav nav-wizard'> 
     <li routerLink="/app1home" routerLinkActive="active" data-toggle="tab"> 
      <span class="link-text-not-active">Step 1</span> 
      <span class="link-text-active">Step 1 - Personal Details</span> 
     </li> 
     <li routerLink="/step2" routerLinkActive="active" data-toggle="tab"> 
      <span class="link-text-not-active">Step 2</span> 
      <span class="link-text-active">Step 2 - some longer title</span> 
     </li> 
     ... 
    </ul> 

，那么Css为导航：

.active .link-text-not-active { 
     display: none; 
    } 

.link-text-active { 
     display: none; 
    } 

.active .link-text-active { 
     display: block !important; 
    } 

要在负载重定向，添加到您的路由器：

{ path: '', redirectTo: '/app1home', pathMatch: 'full' }, 

要从您的控制器导航，请将其添加到您的控制器中：

import { Router } from '@angular/router'; 

... 

constructor(private router: Router) 

... 

//in method 
this.router.navigate('/app1home'); 

Answer 2

@Sam答案看起来很适合我。

我只是添加一些代码为你的下一个和以前的按钮：

<button [routerLink]="nextLink()"> next </button> 
<button [routerLink]="previousLink()"> previous </button> 

，并在您component.ts：

stepLinks = ['/step1','/step2','/step3','/step4'] 

constructor(router:Router) { 
    router.events.subscribe((url: any) => this.url = url); 
} 

// I don't remember well what gives this.url so check it with a console.log before 

nextLink(){ 
    const index = this.stepLinks.indexOf(this.url); 
    if (index === this.stepLinks.length-1){ return `${this.stepLinks[index]}`} 
    return `${this.stepLinks[index + 1]}` 
} 

你需要适应的代码为previousLink（）