Question

我正在使用一个Angular 2应用程序，出于与遗留代码的一些兼容性原因，需要通过应用程序组件上使用的属性获取一些信息。例如，启动angular 2应用程序的html将如下所示：

<myApp id="xyz" areaDone="true" value="" requestID="abc"> Loading ... </myApp>

但是，当我尝试围绕应该根据这些属性的存在和值发生的行为编写一些单元测试时，它们是null / undefined。

要获取值，我们只是在构造函数中将它们拉出来：

        let native = this.elementRef.nativeElement;
        this.requestID= native.getAttribute("requestID");

那么，有没有办法通过testbed / providers来强制应该具有预期属性的本机元素？

Answer 1

您可以调用<table name=""customer""/>，这将返回属性的NamedNodeMap（http://www.w3schools.com/jsref/prop_node_attributes.asp）。

从NamedNodeMaps获取东西的语法并不可怕，这是我在我的一个测试中从d3对象获取x1属性

Connection to http://xx.xx.xx.xxx refused

Answer 2

您可以使用以下语法从html元素获取属性值

//检索html元素

const element = fixture.debugElement.nativeElement.querySelector('name of element'); // example a, h1, p

//从该元素获取属性值

  const attributeValue = element.attributeName // like textContent/href

Answer 3

这就是我最终让它工作的方式

const element = fixture.debugElement.nativeElement.querySelector('name of element'); // example a, h1, p

const attributeValue = element['attribute name']; // for example src, href

App组件中的Angular 2 nativeElement属性测试

3 个答案: