在angular 2中动态显示图标

在Angular 2中动态显示图标可以通过使用第三方图标库来实现。以下是一种常见的方法：

1. 选择一个合适的第三方图标库，例如Font Awesome、Material Icons等。这些图标库提供了大量的矢量图标，可以通过CSS类名来使用。
2. 在Angular项目中安装所选图标库的相关依赖。可以通过npm或yarn来安装。
3. 在Angular组件中引入所需的图标库。可以通过在组件的CSS文件中引入图标库的样式文件，或者在组件的HTML模板中直接使用图标库提供的CSS类名。
4. 在组件中定义一个变量来控制是否显示图标。例如，可以使用一个布尔型变量来表示图标的显示状态。
5. 在HTML模板中使用ngIf指令根据变量的值来决定是否显示图标。例如，可以使用ngIf="showIcon"来控制图标的显示与隐藏。
6. 在组件中通过改变变量的值来动态控制图标的显示。可以通过事件、条件判断等方式来改变变量的值。

以下是一个示例代码：

在组件的CSS文件中引入Font Awesome图标库的样式文件：

@import '~@fortawesome/fontawesome-free/css/all.css';

在组件的HTML模板中使用ngIf指令来动态显示图标：

<div *ngIf="showIcon">
  <i class="fas fa-star"></i>
</div>

在组件的TypeScript文件中定义变量并控制图标的显示：

export class MyComponent {
  showIcon: boolean = false;

  toggleIcon() {
    this.showIcon = !this.showIcon;
  }
}

通过调用toggleIcon方法可以改变showIcon变量的值，从而动态控制图标的显示与隐藏。

推荐的腾讯云相关产品：腾讯云CDN（内容分发网络），详情请参考：https://cloud.tencent.com/product/cdn