angular - Angular2 Router 中有抽象状态吗？

Question

我正在寻找与 ui-router abstract state 类似的解决方案在 Angular2 路由器中。

拥有“虚拟”父状态来解决子状态的一些常见问题。

Answer 1

路由不需要与组件相关联。它只能有一个空路径的 child 。您可以将此“空”路由用于守卫或解决之类的事情。

直到现在测试我才知道的一件事是 Resolve s(它的数据)将滴入子路由。因此，如果您想“解决子状态的一些常见问题”，这里可能是您的最佳选择。

{
  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');
  })));
});