Angular-fixture.debugElement.query（By.directive（IsRouteDirective）找不到宿主元素

Question

我正在为指令编写测试，但无法使用 By.directive(IsRouteDirective) 查询指令宿主元素。控制台日志记录 hostElement 总是产生 null。

在下面的代码中，LibRouteComponent 和 LibTestComponent 只是带​​有空模板的虚拟组件。

这是指令（短版）：

@Directive({
  selector: '[libIsRoute]'
})

export class IsRouteDirective implements OnInit { ... }

这是它的测试设置：

describe('IsRouteDirective', () => {

  let directive: IsRouteDirective;
  let fixture: ComponentFixture<LibTestComponent>;
  let hostElement;

  beforeEach(() => {

    fixture = TestBed.configureTestingModule({
      imports: [
        LibTestModule,
        RouterTestingModule.withRoutes([
          {
            path: '',
            pathMatch: 'full',
            redirectTo: 'foo'
          },
          {
            path: 'foo',
            component: LibRouteComponent
          },
          {
            path: 'bar',
            component: LibRouteComponent
          }
        ])
      ],
      declarations: [IsRouteDirective]
    })
    .overrideComponent(LibTestComponent, {
      set: {
        template: `
          <router-outlet></router-outlet>
          <div [libIsRoute]="['foo']"></div>
        `
      }
    })
    .createComponent(LibTestComponent);

    fixture.detectChanges();

    hostElement = fixture.debugElement.query(By.directive(IsRouteDirective));
    console.log(hostElement);
    directive = hostElement.injector.get(IsRouteDirective);

  });

  it('should be defined', () => {
    expect(hostElement).toBeTruthy();
  });
});

使用By.css('div') 在日志中给出DebugElement{nativeNode: <div libisroute=""></div>....，这表明该元素存在并且在其上设置了指令选择器。

我正在做官方文档正在做的事情here。

为什么By.directive(IsRouteDirective) 在我的情况下不起作用？

Answer 1

解决方法

fixture.debugElement.query(By.directive(IsRouteDirective)).injector.get(IsRouteDirective)