Question

我共享了模块-

@NgModule({
  imports: [
    CommonModule,
  ],
  exports: [
    ThreeDotsIconComponent,
    HighlightDirective
  ],
  declarations: [
    HighlightDirective,
    ThreeDotsIconComponent
  ],
  entryComponents: [
  ],
  providers: []
})
export class SharedLayoutModule {}

ThreeDotsIconComponent组件是一个简单的组件，其中包含材料2图标组件的代码。

import {Component} from '@angular/core';
import {DomSanitizer} from '@angular/platform-browser';
import {MatIconRegistry} from '@angular/material';

/**
 * @title SVG icons
 */
@Component({
  selector: 'icon-svg-example',
  templateUrl: 'icon-svg-example.html',
  styleUrls: ['icon-svg-example.css'],
})
export class IconSvgExample {
  constructor(iconRegistry: MatIconRegistry, sanitizer: DomSanitizer) {
    iconRegistry.addSvgIcon(
        'thumbs-up',
        sanitizer.bypassSecurityTrustResourceUrl('assets/img/examples/thumbup-icon.svg'));
  }
}

我想在所有宿主项目（使用共享模块的所有项目）中使用thumbs-up图标名称。我想不使用它的html选择器，例如-

<icon-svg-example></icon-svg-example>

在宿主项目中。我不确定该怎么做。尝试了许多方法，但没有找到确切的解决方案。我将使用类似-

<mat-icon svgIcon="thumbs-up"></mat-icon>

我不想在宿主项目中注册图标。请帮忙！

Answer 1

添加用于注册svg图标的模块，如下所示：

export class IconSvgModule {
  constructor(iconRegistry: MatIconRegistry, sanitizer: DomSanitizer) {
    iconRegistry.addSvgIcon(
      'export-file',
      sanitizer.bypassSecurityTrustResourceUrl('content/images/icon/svg/export.svg'));
  }
}

并将此模块导入/导出到shared.module

imports: [IconSvgModule],
exports: [IconSvgModule]

现在您可以在类似的任何地方使用它

<mat-icon svgIcon="export-file" ></mat-icon>

在角度共享模块中注册Mat-icon并在主机应用程序中使用它

1 个答案: