Добавить значок как переменную или HTML-привязку в контроллере - PullRequest
Новая
       6

Добавить значок как переменную или HTML-привязку в контроллере

0 голосов
/ 06 октября 2018

Используя 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 для этой проблемы .

1 Ответ

0 голосов
/ 06 октября 2018

Хорошо, я думаю, что проблема здесь заключается в использовании Angular привязки вне приложения Angular. 

[icon]='faCoffee'

подразумевает, что faCoffee является переменной, вы МОЖЕТЕ иметь возможность обойтись без нее без переменной.замените привязку [icon] на; 

icon='actual value not a variable'

, но, скорее всего, для запуска Angular Component вне приложения Angular вам придется преобразовать его в Angular Element.

Иливы могли бы использовать DomPortalHost Angular CDK.

Хост портала может динамически добавлять угловые элементы на страницу, и с помощью 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);
...