Angular2 Routerに抽象状態がありますか？

Question

Angular2 Routerでui-router abstract stateと似たような解決策を探しています。

"virtual"の子ステートの一般的な問題を解決するには親ステートを使用します。

Answer 1

ルートは、コンポーネントに関連付けられている必要はありませんでしょう、この[app.routeing.ts]

const APP_ROUTES:Routes = [ 
    {path: '', redirectTo: '/dashboard', pathMatch: 'full'}, 
    {path: 'report', component: ReportComponent, children: REPORT_ROUTES}, 
    ]; 

と子のルートのように子ルートを追加することができます。空のパスを持つ子を持つことができます。あなたはガードや解決のようなものにこの "空の"ルートを使うことができます。

私が今テストするまでわからなかったことの1つは、Resolve（それはデータです）が子供のルートに流れ込むことです。だから、もしあなたが「子どものためにいくつかの共通のことを解決したい」なら、それはそれを行う場所かもしれません。ここで

{ 
    path: '', 
    resolve: { 
    data: DummyResolve 
    }, 
    children: [ 
    { path: 'one', component: Child1Component }, 
    { path: 'two', component: Child2Component } 
    ] 
} 

は私が

import { Component, Injectable, OnInit } from '@angular/core'; 
import { Router, Resolve, ActivatedRoute } from '@angular/router'; 
import { By } from '@angular/platform-browser'; 
import { Location, CommonModule } from '@angular/common'; 
import { RouterTestingModule } from '@angular/router/testing'; 
import { TestBed, inject, fakeAsync, tick, ComponentFixture } from '@angular/core/testing'; 

@Injectable() 
class DummyResolve implements Resolve<string> { 
    resolve() { 
    return 'Hello Routing'; 
    } 
} 

@Component({ 
    template: ` 
    <router-outlet></router-outlet> 
    ` 
}) 
class RoutingComponent { 
} 

@Component({ 
    template: ` 
    <h1>Child One</h1> 
    <span>{{ data }}</span> 
    ` 
}) 
class Child1Component implements OnInit { 
    data: string; 

    constructor(private route: ActivatedRoute) {} 

    ngOnInit() { 
    this.route.data.forEach((data: { data: string }) => { 
     this.data = data.data; 
     console.log(`data from child 1: ${this.data}`); 
    }); 
    } 
} 

@Component({ 
    template: ` 
    <h1>Child Two</h1> 
    <span>{{ data }}</span> 
    ` 
}) 
class Child2Component implements OnInit { 
    data: string; 

    constructor(private route: ActivatedRoute) {} 

    ngOnInit() { 
    this.route.data.forEach((data: { data: string }) => { 
     this.data = data.data; 
     console.log(`data from child 2: ${this.data}`); 
    }); 
    } 
} 

describe('component: RoutingComponent', function() { 
    let fixture: ComponentFixture<RoutingComponent>; 

    beforeEach(() => { 
    TestBed.configureTestingModule({ 
     imports: [ 
     CommonModule, 
     RouterTestingModule.withRoutes([ 
      { 
      path: '', 
      resolve: { 
       data: DummyResolve 
      }, 
      children: [ 
       { path: 'one', component: Child1Component }, 
       { path: 'two', component: Child2Component } 
      ] 
      } 
     ]) 
     ], 
     providers: [ DummyResolve ], 
     declarations: [ RoutingComponent, Child1Component, Child2Component ] 
    }); 

    fixture = TestBed.createComponent(RoutingComponent); 
    fixture.detectChanges(); 
    }); 

    it('should go to child one', 
    fakeAsync(inject([Router, Location], (router: Router, location: Location) => { 

    router.navigate(['/one']); 
    tick(); 
    fixture.detectChanges(); 
    let debugEl = fixture.debugElement; 
    expect(debugEl.query(By.css('h1')).nativeElement.innerHTML).toEqual('Child One'); 
    expect(debugEl.query(By.css('span')).nativeElement.innerHTML).toEqual('Hello Routing'); 
    }))); 

    it('should go to child two', 
    fakeAsync(inject([Router, Location], (router: Router, location: Location) => { 

    router.navigate(['/two']); 
    tick(); 
    fixture.detectChanges(); 
    let debugEl = fixture.debugElement; 
    expect(debugEl.query(By.css('h1')).nativeElement.innerHTML).toEqual('Child Two'); 
    expect(debugEl.query(By.css('span')).nativeElement.innerHTML).toEqual('Hello Routing'); 
    }))); 
}); 

Answer 2

あなたが

export const REPORT_ROUTES: RouterConfig = [ 
    { path: '', component: ReportHomeComponent }, 
    { path: 'server-report', component: ServerReportComponent } // report/server-report 
    { path: 'client-report', component: ClientReportComponent } // report/client-report 
];