Question

我使用Angular和JQuery，试图将FontAwesome图标附加到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>")

  }

}

理想情况下，我想附加<fa-icon [icon]='faCoffee'></fa-icon>，因为这是我可以在HTML及其绑定中使用的内容。

有没有一种简单的方法，而无需附加图标的整个HTML？

编辑：我创建了一个StackBlitz for this issue。

Answer 1

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

[icon]='faCoffee'

暗示faCoffee是一个变量，您可以不用该变量就可以摆脱它。将[icon]绑定替换为；

icon='actual value not a variable'

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

或者您可以使用Angular CDK的DomPortalHost。

门户网站主机可以在页面中动态添加角度元素，使用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绑定

1 个答案: