Jquery 在控制器中将图标附加为变量或HTML绑定

使用Angular和JQuery，我试图将一个图标附加到

div

这是我的TS：

export class AppComponent {
  faCoffee = faCoffee;
  faLifeRing = faLifeRing;

  ngOnInit() {
    $("div").append(this.faCoffee); //Does not work
    $("div").append("<fa-icon [icon]='faCoffee'></fa-icon>"); //Does not work

    //Works
    $("div").append("<fa-icon _ngcontent-c7='' class='ng-fa-icon' ng-reflect-icon-prop='[object Object]'><svg aria-hidden='true' data-prefix='fas' data-icon='coffee' class='svg-inline--fa fa-coffee fa-w-20' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'><path fill='currentColor' d='M192 384h192c53 0 96-43 96-96h32c70.6 0 128-57.4 128-128S582.6 32 512 32H120c-13.3 0-24 10.7-24 24v232c0 53 43 96 96 96zM512 96c35.3 0 64 28.7 64 64s-28.7 64-64 64h-32V96h32zm47.7 384H48.3c-47.6 0-61-64-36-64h583.3c25 0 11.8 64-35.9 64z'></path></svg></fa-icon>")

  }

}

导出类AppComponent{
faCoffee=faCoffee；
失败=失败；
恩戈尼尼特（）{
$（“div”）.append（this.faCoffee）；//不起作用
$（“div”）.append（“”；//不起作用
//工作
$（“div”）。追加（“”）
}
}

理想情况下，我希望附加

，因为这是我可以在HTML中使用的绑定

有没有一个简单的方法，我可以做到这一点，而不附加整个HTML的图标

---

编辑：我创建了一个。

好的，我认为这里的问题是在Angular应用程序之外使用Angular binding

[icon]='faCoffee'

这意味着faCoffee是一个变量，如果没有该变量，您可能可以不受影响。将[图标]绑定替换为

icon='actual value not a variable'

但为了在Angular应用程序之外运行Angular组件，最有可能的情况是，您必须将其转换为Angular元素

或者您可以使用Angular CDK的DomPortalHost

门户主机可以动态地向页面添加angular元素，使用DomPortalHost，您应该能够定位angular应用程序之外的区域。 大概是这样的：

    // Locate an element that exists on the page
    const headerElement = document.querySelector('#pageHeader');
    // Locate the component factory for the HeaderComponent
    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(HeaderComponent);
    // Generate an instance of the HeaderComponent 
    this.componentRef = componentFactory.create(this.injector, [], headerElement);
    // Attach to the component to Angular's component tree for dirty checking
    this.applicationRef.attachView(this.componentRef.hostView);

---

你能把html放在模板中而不是.ts文件吗？@JBoothUA对于这个解决方案，我实际上不能，因为我在Angular应用程序之外附加到DOM元素。