在 angular 2 中使用 viewchild 更新元素的 innerhtml

Question

我有 html 个元素，例如

<section class="" #hiddenElement>
    <span>title</span>
    <span class="value"></span>
</section>

我使用

访问组件中的元素

@ViewChild('hiddenElement') hiddenElement: ElementRef;

如何更新 class 为值的元素的内部 html？

Answer 1

你可以获得hiddenElementchildren using nativeElement.children, filter them by className and modify their innerHTML using element.innerHTML

像这样

Array
    .from(this.hiddenElement.nativeElement.children)
    .filter(c => c.className.includes('value'))
    .forEach(c => c.innerHTML = 'New innerHTML');

plnkr

在 angular 2 中使用 viewchild 更新元素的 innerhtml

Update innerhtml of element using viewchild in angular 2

viewchild

angular