从指令 Angular 加载 Mat 图标

Posted 2023-02-22

【中文标题】从指令 Angular 加载 Mat 图标

【英文标题】：Loading Mat Icon from a directive Angular

【发布时间】：2020-03-09 20:21:46

【问题描述】：

我很难从 Angular Material 加载图标组件。我想要实现的是附加一个可点击的图标，它使用这样的指令清除输入。

<input appClearInput></input>

问题是组件本身被加载到具有适当材质类的模板中，但未渲染 SVG。图标的功能和定位都很好，但问题是 SVG 没有添加到组件内，因此它显示为空白。

这是我的指令中的代码：

import  Directive, Renderer2, ElementRef, OnInit, ViewContainerRef, ComponentFactoryResolver, ChangeDetectorRef  from '@angular/core';
import  NgControl  from '@angular/forms';
import  MatIcon  from '@angular/material';

@Directive(
  selector: '[appClearInput]'
)
export class ClearInputDirective implements OnInit 
  constructor(
    private elementRef: ElementRef,
    private renderer: Renderer2,
    private control: NgControl,
    private factory: ComponentFactoryResolver,
    private vcRef: ViewContainerRef
 

ngOnInit() 
  this.createComponent();


createComponent() 
    this.vcRef.clear();

    const factory = this.factory.resolveComponentFactory(MatIcon);
    const matIcon = this.vcRef.createComponent(factory);
    matIcon.instance.svgIcon = 'icon-cross';

    const matIconEl = matIcon.injector.get(MatIcon)._elementRef.nativeElement;
    this.renderer.setAttribute(matIconEl, 'svgIcon', 'icon-cross');
    this.renderer.setStyle(matIconEl, 'cursor', 'pointer');
    this.renderer.setStyle(matIconEl, 'outline', 'none');
    this.renderer.listen(matIconEl, 'click', (e) => this.control.reset());

    const parent = this.elementRef.nativeElement.parentNode;
    const parentParent = this.renderer.parentNode(parent);

    this.renderer.appendChild(parentParent, matIconEl);
  

我认为它不起作用，因为我在实例化组件之后配置组件并且不会再次呈现组件。如果我在 instance._iconRegistry 下记录 ComponentRef，图标列表就在那里。

感谢任何帮助，谢谢。

【问题讨论】：

你能提供这个演示吗？

【参考方案1】：

你所要做的就是在图标上设置innerhtml

const searchIcon = this.viewContainer.createComponent<MatIcon>(searchIconResolver);
searchIcon.instance._elementRef.nativeElement.innerHTML = 'search';