无法访问angular5中的innerhtml元素

Question

我正在尝试使用它的id属性访问我的组件中的innerhtml元素。如果我将元素直接添加到我的模板中，它会起作用，但是当我通过html绑定添加元素时，我无法在组件中访问它。

HTML

<div [innerHtml]="testVal | safingHtml"></div>

组件

testVal='<a id="up1">hello</a>';

ngAfterViewInit() {
    const elem=document.querySelector('#up1');
    console.log(elem); 
}

在上面的代码中，我试图在完成初始化过程后访问html元素。如果我将元素直接添加到模板中，则代码有效，否则返回null。

我也使用具有'DomSanitizer'的自定义管道来获取html属性（id，style）。

自定义管道

import {DomSanitizer} from '@angular/platform-browser';
import {PipeTransform, Pipe} from "@angular/core";

@Pipe({ name: 'safingHtml'})
export class SafingHtmlPipe implements PipeTransform  {
  constructor(private sanitized: DomSanitizer) {}
  transform(value) {
    return this.sanitized.bypassSecurityTrustHtml(value);
  }
}

除了在angular5中使用'viewchild'属性之外，还有使用它的id来访问innerhtml元素吗？