在mat-paginator中插入按钮：图标未渲染与Tooltip不显示问题

问题根源 #

你遇到的两个问题本质是同一个原因：直接通过Renderer2操作原生DOM创建Angular Material组件/指令，不会触发Angular的组件编译与指令初始化流程。

• SVG图标不显示：mat-icon是Angular组件，用createElement创建的只是普通DOM元素，Angular不会识别并初始化它，自然无法加载渲染SVG图标。
• Tooltip不生效：mat-tooltip是Angular指令，直接添加matTooltip属性到原生DOM元素上，Angular不会绑定该指令的逻辑，所以tooltip不会触发显示。

解决步骤 #

1. 注入必要的Angular服务 #

在指令中注入ComponentFactoryResolver、ViewContainerRef，用于动态创建组件和指令：

import { ComponentFactoryResolver, Directive, ElementRef, Inject, OnInit, ViewContainerRef } from '@angular/core';
import { MatPaginator, MAT_PAGINATOR_INJECTION_TOKEN } from '@angular/material/paginator';
import { MatIcon } from '@angular/material/icon';
import { MatTooltip } from '@angular/material/tooltip';

2. 动态创建MatIcon组件并插入按钮 #

不要用Renderer2创建mat-icon元素，而是通过组件工厂动态创建MatIcon实例，让Angular正确初始化它：

// 创建按钮元素
const refreshBtn = this.renderer.createElement('button');
this.renderer.addClass(refreshBtn, 'mat-mdc-icon-button');
this.renderer.addClass(refreshBtn, 'mat-mdc-button-base');

// 动态创建MatIcon组件
const iconFactory = this.componentFactoryResolver.resolveComponentFactory(MatIcon);
const iconComponentRef = this.viewContainerRef.createComponent(iconFactory);
iconComponentRef.instance.fontSet = 'material-icons';
iconComponentRef.instance.fontIcon = 'refresh';

// 将图标组件的宿主元素插入按钮
this.renderer.appendChild(refreshBtn, iconComponentRef.location.nativeElement);

3. 动态绑定MatTooltip指令 #

通过组件工厂创建MatTooltip实例并关联到按钮：

// 动态创建MatTooltip指令实例
const tooltipFactory = this.componentFactoryResolver.resolveComponentFactory(MatTooltip);
const tooltipRef = this.viewContainerRef.createComponent(tooltipFactory);
tooltipRef.instance.message = '刷新数据';
// 将Tooltip关联到按钮元素
tooltipRef.instance.attach(refreshBtn);

4. 确保模块导入正确 #

在NgModule中导入MatIconModule和MatTooltipModule，确保动态创建的组件能被识别：

import { MatIconModule } from '@angular/material/icon';
import { MatTooltipModule } from '@angular/material/tooltip';

@NgModule({
  imports: [
    // ...其他模块
    MatIconModule,
    MatTooltipModule
  ]
})
export class AppModule { }

完整修改后的指令示例 #

import { ComponentFactoryResolver, Directive, ElementRef, Inject, OnInit, Renderer2, ViewContainerRef } from '@angular/core';
import { MatPaginator, MAT_PAGINATOR_INJECTION_TOKEN } from '@angular/material/paginator';
import { MatIcon } from '@angular/material/icon';
import { MatTooltip } from '@angular/material/tooltip';

@Directive({
  selector: '[appPaginatorRefresh]'
})
export class PaginatorRefreshDirective implements OnInit {

  constructor(
    @Inject(MAT_PAGINATOR_INJECTION_TOKEN) private paginator: MatPaginator,
    private el: ElementRef,
    private renderer: Renderer2,
    private componentFactoryResolver: ComponentFactoryResolver,
    private viewContainerRef: ViewContainerRef
  ) { }

  ngOnInit(): void {
    this.addRefreshButton();
  }

  private addRefreshButton(): void {
    // 获取分页器导航容器
    const navContainer = this.el.nativeElement.querySelector('.mat-mdc-paginator-navigation');
    if (!navContainer) return;

    // 创建刷新按钮
    const refreshBtn = this.renderer.createElement('button');
    this.renderer.addClass(refreshBtn, 'mat-mdc-icon-button');
    this.renderer.addClass(refreshBtn, 'mat-mdc-button-base');

    // 动态创建MatIcon组件
    const iconFactory = this.componentFactoryResolver.resolveComponentFactory(MatIcon);
    const iconComponentRef = this.viewContainerRef.createComponent(iconFactory);
    iconComponentRef.instance.fontSet = 'material-icons';
    iconComponentRef.instance.fontIcon = 'refresh';
    this.renderer.appendChild(refreshBtn, iconComponentRef.location.nativeElement);

    // 动态添加MatTooltip
    const tooltipFactory = this.componentFactoryResolver.resolveComponentFactory(MatTooltip);
    const tooltipRef = this.viewContainerRef.createComponent(tooltipFactory);
    tooltipRef.instance.message = '刷新数据';
    tooltipRef.instance.attach(refreshBtn);

    // 添加点击事件
    this.renderer.listen(refreshBtn, 'click', () => {
      console.log('刷新按钮被点击');
      // 这里添加你的刷新逻辑
    });

    // 将按钮插入到上一页和下一页按钮之间
    const nextBtn = navContainer.querySelector('.mat-mdc-paginator-navigation-next');
    if (nextBtn) {
      this.renderer.insertBefore(navContainer, refreshBtn, nextBtn);
    }
  }
}

关键说明 #

动态创建Angular组件/指令时，必须通过ComponentFactoryResolver获取组件工厂，再通过ViewContainerRef创建实例，这样Angular才能完成组件的初始化、变更检测等生命周期流程。直接操作原生DOM仅适合纯HTML元素，对于Angular组件/指令必须遵循框架的创建流程。

内容的提问来源于stack exchange，提问作者VBobCat