这是一个简单的breadcrumbs组件。我想测试属性 * active * 是否在routerLink中。

<nav>
  <ol>
    <ng-container *ngFor="let breadcrumb of breadcrumbs">
      <li
        [ngClass]="{ active: breadcrumb.active }"
        *ngIf="!breadcrumb.disabled"
      >
        <span *ngIf="breadcrumb.active">{{ breadcrumb.text }}</span>

        <a *ngIf="!breadcrumb.active" [routerLink]="breadcrumb.to">{{
          breadcrumb.text
        }}</a>
      </li>
    </ng-container>
  </ol>
</nav

我想得到<a> HTML元素，但总是得到null。我试过compiled.querySelector('a')，但也发生了同样的情况。我想要<a> HTML元素，无论我有1，2或3个元素。
我还想访问routerLink属性，但如果我使用.getAttribute('routerLink')，我会得到一个空值。

describe('BreadcrumbsComponent', () => {
  let component: BreadcrumbsComponent;
  let fixture: ComponentFixture<BreadcrumbsComponent>;
  let compiled: HTMLElement;

  beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
      declarations: [BreadcrumbsComponent],
      imports: [IonicModule.forRoot(), RouterTestingModule],
    }).compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(BreadcrumbsComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
    compiled = fixture.nativeElement;
  });

  test('should receive breadcrumb prop', async () => {
    component.breadcrumbs = [
      {
        text: 'Test',
        disabled: false,
        to: '/route',
        active: true,
      },
    ];

    await fixture.whenStable();

    const a = fixture.debugElement.nativeElement.querySelector('nav'); // null

    fixture.detectChanges();
  });
});

我认为它必须与 * 生命周期 * 相关，因为如果我试图获取<nav>元素，我就能做到。
当我试图访问for循环中的元素时，问题出现了。