Добавить значок как переменную или привязку HTML в контроллере
Используя Angular и JQuery, я пытаюсь добавить значок FontAwesome к div.
Вот моя ТС:
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 для этого выпуска.
@JBoothUA Для этого решения я фактически не могу, поскольку я добавляю элемент DOM вне моего приложения Angular.
Ответы 1
Хорошо, я думаю, что проблема здесь в использовании привязки Angular вне приложения Angular.
[icon]='faCoffee'
подразумевает, что faCoffee - это переменная, вы МОЖЕТЕ обойтись без этой переменной. замените привязку [icon] на;
icon='actual value not a variable'
но, скорее всего, чтобы запустить компонент Angular вне приложения Angular, вам придется преобразовать его в элемент Angular.
Или вы можете использовать DomPortalHost от Angular CDK.
Хост портала может динамически добавлять элементы 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?