Question

我刚开始接触Angular，现在遇到了以下问题。

我将localize-router与ngx-translate一起使用，以使路径像http://myapp/en/home和http://myapp/fr/home。语言切换是通过路由器链接完成的：

<a mat-button [routerLink]="'/en'" class="en-link">en</a>
<a mat-button [routerLink]="'/fr'" class="fr-link">fr</a>

我还订阅了LangChangeEvent中的AppComponent：

export class AppComponent implements OnInit {
  constructor(private translate: TranslateService) {
  }

  ngOnInit() {
    this.translate.onLangChange.subscribe((event: LangChangeEvent) => {
      ...
    });
  }
}

一切正常，现在我想测试语言切换：

const routes: Routes = [{path: '', component: AppComponent}];

describe('AppComponent', () => {
  let fixture: ComponentFixture<AppComponent>;
  let translate: TranslateService;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        LocalizeRouterModule.forRoot(routes, {
          parser: {
            provide: LocalizeParser,
            useFactory: LocalizeHttpLoaderFactory,
            deps: [TranslateService, Location, LocalizeRouterSettings]
          }
        }),
        RouterTestingModule.withRoutes(routes),
        HttpClientTestingModule,
        TranslateModule.forRoot({
          loader: {
            provide: TranslateLoader,
            useFactory: TranslateHttpLoaderFactory,
            deps: [HttpClient]
          }
        })
      ],
      declarations: [AppComponent]
    }).compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(AppComponent);
  });

  it('should switch language', () => {
    fixture.detectChanges();
    const selector = By.css('.fr-link');
    const frLink = fixture.debugElement.query(selector);
    fixture.whenStable().then(() => {
      frLink.nativeElement.click();
      const injector = getTestBed();
      const translate = injector.get(TranslateService);
      expect(translate.currentLang).toBe('fr');
    });
  });
});

单击链接后，我从其他组件测试中得到了错误：

DashboardComponent should create
Uncaught Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'fr'
Error: Cannot match any routes. URL Segment: 'fr'
  at ApplyRedirects.push../node_modules/@angular/router/fesm5/router.js.ApplyRedirects.noMatchError (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/router/fesm5/router.js:2469:1)
  at CatchSubscriber.selector (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/router/fesm5/router.js:2450:1)
  at CatchSubscriber.push../node_modules/rxjs/_esm5/internal/operators/catchError.js.CatchSubscriber.error (http://localhost:9876/_karma_webpack_/webpack:/node_modules/rxjs/_esm5/internal/operators/catchError.js:34:1)
  at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (http://localhost:9876/_karma_webpack_/webpack:/node_modules/rxjs/_esm5/internal/Subscriber.js:80:1)
  at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (http://localhost:9876/_karma_webpack_/webpack:/node_modules/rxjs/_esm5/internal/Subscriber.js:60:1)
  at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (http://localhost:9876/_karma_webpack_/webpack:/node_modules/rxjs/_esm5/internal/Subscriber.js:80:1)
  at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (http://localhost:9876/_karma_webpack_/webpack:/node_modules/rxjs/_esm5/internal/Subscriber.js:60:1)
  at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (http://localhost:9876/_karma_webpack_/webpack:/node_modules/rxjs/_esm5/internal/Subscriber.js:80:1)
  at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (http://localhost:9876/_karma_webpack_/webpack:/node_modules/rxjs/_esm5/internal/Subscriber.js:60:1)
  at TapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/tap.js.TapSubscriber._error (http://localhost:9876/_karma_webpack_/webpack:/node_modules/rxjs/_esm5/internal/operators/tap.js:61:1) thrown

DashboardComponent是一个容器组件，通常绑定到AppRoutingModule中的空路径：

export const routes: Routes = [{path: '', component: DashboardComponent}]

我想念什么？

Angular 7 + localize-router：测试语言切换

0 个答案: