Question

我试图模仿RouterLink，我找到了Angular官方documentation的指南。添加之后，它以某种方式解决了我的问题，但又引发了两个问题。

TS Lint开始推出一些错误。

[tslint] The selector of the directive "RouterLinkStubDirective" should have prefix "abc" (https://angular.io/styleguide#style-02-08) (directive-selector)

[tslint] Use @HostBindings and @HostListeners instead of the host property (https://angular.io/styleguide#style-06-03) (use-host-property-decorator)

[tslint] In the class "RouterLinkStubDirective", the directive input property "linkParams" should not be renamed.Please, consider the following use "@Input() linkParams: string" (no-input-rename)

由于JIT编译器，它不允许我在ngModule中添加它而不创建指令。

添加RouterLinkStub解决了我的测试问题，但它破坏了我的应用程序。现在我的应用程序因为JIT而抛出以下错误。

ERROR in : Cannot determine the module for class RouterLinkStubDirective in /Users/usmantahir/Workspace/abcApp/src/app/testing/stubs/router-stubs.ts! Add RouterLinkStubDirective to the NgModule to fix it.`

我试图找到解决方案。我发现了一个here，所以我尝试了这个

import { Directive, Input, NgModule } from '@angular/core';

@Directive({
  selector: '[routerLink]',
  host: {
    '(click)': 'onClick()'
  }
})
export class RouterLinkStubDirective {
  @Input('routerLink') linkParams: any;
  navigatedTo: any = null;

  onClick() {
    this.navigatedTo = this.linkParams;
  }
}

@NgModule({
  declarations: [
    RouterLinkStubDirective,
  ]
})
class StubModule {}

但它没有解决它，但开始在浏览器中抛出此错误。

TypeError: modules[moduleId] is undefined

我通过在此存根模块中导入主应用程序模块来解决此错误。

@NgModule({
  imports: [
    AppModule
  ],
  declarations: [
    RouterLinkStubDirective
  ]
})
export class FakeRouterModule {
}

这是一个测试样本，我在第一时间开始面对这个问题。

class RouterStub {
  navigate(url: string) { return url; }
}

describe('ReviewAddressComponent', () => {
  let fixture: ComponentFixture<ReviewAddressComponent>;
  let component: ReviewAddressComponent;
  let el: DebugElement;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        ReactiveFormsModule
      ],
      declarations: [
        ...CombineComponents,
        RouterLinkStubDirective
      ],
      providers: [
        { provide: Router, useClass: RouterStub }
      ]
    }).compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(ReviewAddressComponent);
    component = fixture.componentInstance;
    el = fixture.debugElement;
  });

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

现在的问题是，

有角度的文档是误导性的，或者我在这里做错了。
还有其他好方法可以解决这个routerLink问题问题。即。 routerLink is unkown for <a>
此存根模块是否会以任何方式影响我的应用程序？性能或运行中的任何故障？

我们按照Angular官方指南

0 个答案: