Angular 8模板不能与ng- routerLinkActive一起使用

Angular 8模板不能与ng-routerLinkActive一起使用是因为ng-routerLinkActive是Angular的一个指令，用于在当前活动路由和给定路由匹配时添加活动CSS类。然而，在Angular 8中，模板中使用ng-routerLinkActive指令会导致编译错误。

解决这个问题的方法是使用ngClass指令来手动添加活动CSS类。ngClass指令允许根据条件动态添加或移除CSS类。以下是一个示例代码：

<a routerLink="/home" [ngClass]="{'active': isActive('/home')}">Home</a>
<a routerLink="/about" [ngClass]="{'active': isActive('/about')}">About</a>

在组件的代码中，我们需要定义一个方法isActive来判断当前路由是否与给定路由匹配：

import { Router } from '@angular/router';

@Component({
  ...
})
export class YourComponent {
  constructor(private router: Router) {}

  isActive(route: string): boolean {
    return this.router.isActive(route, true);
  }
}

在上述示例中，我们使用routerLink指令来定义路由链接，并使用ngClass指令来动态添加活动CSS类。isActive方法通过调用Router的isActive方法来判断当前路由是否与给定路由匹配。

推荐的腾讯云相关产品和产品介绍链接地址：

• 腾讯云主页：https://cloud.tencent.com/
• 云服务器（CVM）：https://cloud.tencent.com/product/cvm
• 云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
• 云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
• 云存储（COS）：https://cloud.tencent.com/product/cos
• 人工智能（AI）：https://cloud.tencent.com/product/ai
• 物联网（IoT）：https://cloud.tencent.com/product/iotexplorer
• 移动开发（移动推送、移动分析）：https://cloud.tencent.com/product/mps
• 区块链（BCS）：https://cloud.tencent.com/product/bcs
• 元宇宙（Tencent Real-Time 3D）：https://cloud.tencent.com/product/trtc