茉莉花测试 - 获取内部元素<ng-template>(角度)

Question

我想在ng-tamplate中测试HTML元素。

<ng-template>
<button class="create"></button>
</ng-template>

茉莉花测试：

fixture = TestBed.createComponent(SomeComponent);
const htmlElement: HTMLElement = fixture.nativeElement;
// Does not work:
const p = htmlElement.querySelector('.create');

如何在 ng 模板中获取 html 元素？如果我将按钮放在 ng 模板标签之外，它可以工作。我认为这与影子dom有关。

版本： 茉莉花 2.8.0;角度 5.2.9

Answer 1

我忘了打电话给fixture.detectChanges();.仅当您调用此方法时，组件才会完全呈现到 DOM 中(包括影子 DOM 元素(。以下代码有效：

fixture = TestBed.createComponent(SomeComponent);
fixture.detectChanges();
const htmlElement: HTMLElement = fixture.nativeElement;
const p = htmlElement.querySelector('.create');

有关更多详细信息，请参阅 https://angular.io/guide/testing#detectchanges。