Angular 8-激活时更改Mat菜单项颜色

Angular 8是一种流行的前端开发框架，它基于TypeScript构建，并提供了丰富的工具和组件来简化Web应用程序的开发过程。在Angular 8中，可以通过更改Mat菜单项的颜色来实现激活时的效果。

要在激活时更改Mat菜单项的颜色，可以使用Angular Material库中的MatMenu组件和MatMenuItem组件。以下是实现此目的的步骤：

1. 首先，确保已正确安装和配置Angular Material库。可以通过在项目中的package.json文件中添加相应的依赖项来安装Angular Material。
2. 在需要使用MatMenu的组件中，导入MatMenuModule和MatIconModule模块，并将它们添加到该组件的@NgModule装饰器的imports数组中。

import { MatMenuModule } from '@angular/material/menu';
import { MatIconModule } from '@angular/material/icon';

@NgModule({
  imports: [MatMenuModule, MatIconModule],
  ...
})
export class YourComponentModule { }

1. 在HTML模板中，使用MatMenu和MatMenuItem组件创建菜单。可以通过在MatMenuItem上使用[ngClass]指令来动态设置菜单项的样式类。

<button mat-button [matMenuTriggerFor]="menu">Open Menu</button>
<mat-menu #menu="matMenu">
  <button mat-menu-item [ngClass]="{'active-item': isActive('item1')}">Item 1</button>
  <button mat-menu-item [ngClass]="{'active-item': isActive('item2')}">Item 2</button>
  <button mat-menu-item [ngClass]="{'active-item': isActive('item3')}">Item 3</button>
</mat-menu>

1. 在组件的TypeScript文件中，定义一个方法来判断当前菜单项是否处于激活状态。根据需要，可以使用路由器或其他条件来确定激活状态。

isActive(item: string): boolean {
  // 根据需要的逻辑判断菜单项是否处于激活状态
  return item === 'item1';
}

1. 在组件的CSS文件中，定义.active-item类的样式，以更改激活时的菜单项颜色。

.active-item {
  color: red;
}

通过以上步骤，当菜单项处于激活状态时，它们的颜色将更改为红色。可以根据需要自定义.active-item类的样式。

推荐的腾讯云相关产品：腾讯云云服务器（CVM）和腾讯云对象存储（COS）。

• 腾讯云云服务器（CVM）：提供可扩展的云服务器实例，适用于各种规模的应用程序和工作负载。了解更多信息，请访问：腾讯云云服务器
• 腾讯云对象存储（COS）：提供安全可靠的对象存储服务，用于存储和访问各种类型的数据。了解更多信息，请访问：腾讯云对象存储

请注意，以上答案仅供参考，具体的实现方法和推荐的产品可能会根据实际需求和环境而有所不同。