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)