Question

例如在my-components-list.html中，我有：

<my-component #first></my-component>
<my-component #second></my-component>
<my-component #third></my-component>
<input #forth/>

我想像这样在我的测试中获得它

it('test', () => {
    const myComponent: HTMLElement = fixture.debugElement.query(By.someMethod('#first'));
    const myInput: HTMLElement = fixture.debugElement.query(By.someMethod('#forth'));
}

Answer 1

您可以像在正常的Angular代码中一样使用模板引用变量。使用@ViewChild装饰器将它们定义为组件类中的字段：

@ViewChild('first') first: ElementRef;
@ViewChild('second') second: ElementRef;
...

然后在测试中，您可以像常规组件字段一样访问它们：fixture.componentInstance.first

我首先希望为该问题提供一个动态解决方案，在该解决方案中，我可以通过引用变量名称访问元素，但是我对所描述的解决方案的思考更多，我认为这是正确的方法。它具有更好的类型安全性，并且元素被封装为组件而不是模板的一部分。

是否可以在茉莉花测试中获取模板引用变量？

1 个答案: