Question

首先我要说明我是Angular 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]
})

这是我的App1模块，它包含自己的路由：

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

这是我的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组件的延迟加载方法，以便在应用初始化期间不必加载组件

我试过把＆＃34;选择器＆＃34;在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（）

的代码

router_outlet和向导步骤

2 个答案: