Angular2 单元测试错误：无法绑定到“routerLink”，因为它不是“a”的已知属性答案

【问题标题】：Angular2 unit testing error: Can't bind to 'routerLink' since it isn't a known property of 'a'Angular2 单元测试错误：无法绑定到“routerLink”，因为它不是“a”的已知属性
【发布时间】：2017-02-15 09:50:47
【问题描述】：

我正在尝试使用单元测试（业力、茉莉花）进行管理，但出现错误：

无法绑定到“routerLink”，因为它不是“a”的已知属性

我什至没有更改由 angular-cli 创建的 *.spec.ts 文件...

这是我的文件：

user-list.component.html

<ul>
  <li *ngFor="let user of users">
    <a [routerLink]="user._id" (click)="userClicked(user)">{{user.fullName}}</a>
  </li>
</ul>

<router-outlet></router-outlet>

user-list.component.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

import { IUser, User } from '../../../interfaces/user';
import { UsersService } from '../../../services/users.service';

@Component({
  selector: 'app-user-list',
  templateUrl: './user-list.component.html',
  styleUrls: ['./user-list.component.css']
})
export class UsersListComponent implements OnInit {

  users: IUser[] = [];

  constructor(private usersService: UsersService, private router: Router) { }

  ngOnInit() {
    this.usersService.getAll()
      .subscribe(users => {
        this.users = users.sort(...).map(...);
      });

  }

  userClicked(user) {
    this.usersService.setCurrentUser(user);
  }

  clickXBtn(user) {
    this.usersService
        .deleteUser(user)
        .subscribe(...);
  }

}

user-list.component.spec.ts

/* tslint:disable:no-unused-variable */
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';

import { UsersListComponent } from './user-list.component';

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

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ UsersListComponent ]
    })
    .compileComponents();
  }));

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

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

我应该改变什么？如何让它发挥作用？

【问题讨论】：

标签： angular

【解决方案1】：

Angular 2 Jasmine Can't bind to 'routerLink' since it isn't a known property of 'a' 可能重复

要解决您的问题，请尝试存根 RouterLink https://angular.io/guide/testing-components-scenarios#components-with-routerlink

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

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

并在您的测试中使用存根的 RouterLink

【讨论】：

@Zurab-D 不再 :) 链接已损坏
这是新链接：angular.io/guide/testing#components-with-routerlink

【解决方案2】：

RouterLink 存根的更新版本是

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

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

  @HostListener('click') onClick(): void {
    this.navigatedTo = this.linkParams;
  }
}

但是，存根代码不是必需的。您需要做的就是将此语句添加到您的 .spec.ts 文件中

import { RouterTestingModule } from '@angular/router/testing';

【讨论】：