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

난 항상 눈에 보이는 내 마법사 단계를 유지하고 누군가가 다음 및 이전을 클릭하면 다음 번에 자식 요소 하나를로드 할 위치를 감수은 ..

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.routing입니다. 여기

내 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에 "selector"를 넣으려고했지만 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 Answer 제가 나에게 맞는 것 같습니다.

난 그냥 당신의 다음 및 이전 버튼에 대한 몇 가지 코드를 추가합니다

:

<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에 대한 코드를 적용 할 필요가)