没有将“exportAs”设置为“routerLinkActive”的指令答案

【问题标题】：There is no directive with "exportAs" set to "routerLinkActive"没有将“exportAs”设置为“routerLinkActive”的指令
【发布时间】：2020-03-03 09:53:03
【问题描述】：

我在我的应用程序中使用 mat nav list 组件来实现选项卡和导航目的。它在前端完美运行，但在测试用例中抛出错误。

从业力中得到以下错误。

 There is no directive with "exportAs" set to "routerLinkActive" ("        *ngFor="let tab of tabs"
             [routerLink]="tab.path"
             [routerLinkActive] [ERROR ->]#rla="routerLinkActive"
             [active]="rla.isActive"
             selectedIndex="0"

component.html

<nav mat-tab-nav-bar>
        <a
            mat-tab-link
            *ngFor="let tab of tabs"
            [routerLink]="tab.path"
            [routerLinkActive] #rla="routerLinkActive"
            [active]="rla.isActive"
            selectedIndex="0"
        >
            <i class="{{tab.icon}}"></i>
            {{ tab.label }}
        </a>
    </nav>

【问题讨论】：

您可以尝试删除routerLinkActive 的方括号吗？
删除 [] 后出现同样的错误。
你的 Angular 和 Angular Material 版本是什么？
使用 Angular 材质 2
你的 Angular 版本怎么样？

标签： angular angular-material karma-runner

【解决方案1】：

有参照物 Angular 4 Error: No provider for ChildrenOutletContexts in Karma-Jasmine Test 线程添加了RouterTestingModule。

解决了业力错误。

【讨论】：

也解决了我的问题。谢谢！

【解决方案2】：

我认为您需要在组件级别将 RouterTestingModule 添加到您的测试中。像这样：

    import { async, ComponentFixture, TestBed } from '@angular/core/testing';
    import { RouterTestingModule } from '@angular/router/testing';
    import { SettingsComponent } from './settings.component';
    import { PageService } from '../../services/page.service';

    import { MaterialModule } from '../shared/material/material.module';

    describe('SettingsComponent', () => {
      let component: SettingsComponent;
      let fixture: ComponentFixture<SettingsComponent>;
      let pageServiceSpy;

      beforeEach(async(() => {
        pageServiceSpy = jasmine.createSpyObj('PageService', ['setPageHeader']);

    TestBed.configureTestingModule({
      declarations: [
        SettingsComponent
      ],
      imports: [
        RouterTestingModule,
        MaterialModule
      ],
      providers: [
        { provide: PageService, useValue: pageServiceSpy}
      ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(SettingsComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });

});

【讨论】：

【解决方案3】：

您只需要在测试代码中使用它：

@Directive({
  selector: '[routerLinkActive]',
  exportAs: 'routerLinkActive'
})
export class RouterLinkActiveDirectiveStub {
}

这里exportAs设置为'routerLinkActive'

【讨论】：

这是我一直在寻找的，我们有一些现有的测试，我不想也不知道是否可以将它们转换为使用 RouterTestingModule。谢谢！