Question

我正在使用ConvertFlow，它将添加以前创建的表单模板，您告诉它确实添加了此模板；为此，您可以添加一个div，其中包含您在其系统上创建的表单的ID。这部分不是问题，只是此服务正在创建HTML表单，因此我无权访问它，添加ID等。

该表单中有一个要隐藏的元素，该元素具有名为data-visible的数据属性。在普通的js中，我可以使用以下方法完成此操作：

$('div[data-field="policyNumber"]').attr("data-visible", false);

但是，我不确定Angular的方式是什么。我以为ChildView会有所帮助，但是这些元素上没有id供我访问，所以还有其他更好的方法吗？也许使用querySelector的东西？

(<any>document).querySelector('div[data-field="policyNumber"]')

我认为这也可能有效，但是如何访问和更改数据属性？

Answer 1

您最好的选择是使用ElementRef和Renderer2。

在您的组件中，注入两个依赖项

constructor(
    private _elRef: ElementRef,
    private _renderer: Renderer2) {}

以及您想在哪里更新属性

const el = (this._elRef.nativeElement as HTMLElement).querySelector('[data-field="policyNumber"]');

this._renderer.setAttribute(el, 'data-visible', 'false');

Answer 2

您不应该使用document.querySelector，可以注入例如ElementRef并通过elRef.nativeElement.querySelector方法进行搜索。例如

class MyComponent implements OnInit {
  private div: any;

  constructor(private elRef: elementRef) {}

  ngOnInit() {
    this.div = this.elRef.nativeElement.querySelector('div[data-field="policy-number"]');
  }

关于为数据属性设置值，使用Renderer2相对简单。从上面的示例开始：

class Mycomponent {
  constructor(private elRef: ElementRef, private renderer: Renderer2) {}

  private setAttribute() {
    this.renderer.setAttribute(this.elRef.nativeElement.querySelector('div'), 'data-field', 'policy-number');
  }
}

Here's一个示例性的闪电战。

更改元素数据属性的Angular 2方法

2 个答案: