如何使用 Angular 7 中的组件绑定获得 DOM-翻译的 html？

Question

让我们来看这个简单的例子：

@Component({
  selector: 'app-favorite-color',
  template: `<p>My favorite color is {{ favoriteColor }}</p>`
})

export class FavoriteColorComponent {
   favoriteColor: string = "red";

   getInnerHTML(){
   }
}

我希望 getInnerHTML 函数 return:

<p>My favorite color is red</p>

我怎样才能做到这一点？

Answer 1

您可以在构造函数中注入 Element Ref 并访问 nativeElement。

constructor(private el: ElementRef){}

getInnerHTML() {
  return this.el.nativeElement.innerHTML;
}

如何使用 Angular 7 中的组件绑定获得 DOM-翻译的 html？

How to get DOM-translated html with bindings of component in Angular 7?

angular-template

angular