如何基于URL路径结合*ngIf切换Angular4页面内容

嘿，这个需求在Angular里实现起来挺简单的，核心就是借助Angular自带的Router服务获取当前路由信息，再配合*ngIf指令就能轻松控制div的显示隐藏。我给你一步步拆解实现步骤：

第一步：在组件中注入Router服务 #

首先，你需要在目标组件的.ts文件里导入Router，并在构造函数中注入它——这样我们就能拿到当前的URL路径信息了：

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

@Component({
  selector: 'app-your-target-component',
  templateUrl: './your-target-component.component.html',
  styleUrls: ['./your-target-component.component.css']
})
export class YourTargetComponentComponent {
  // 用public修饰，方便直接在模板中访问router对象
  constructor(public router: Router) { } 
}

第二步：在模板中用*ngIf判断路由并切换div #

接下来在组件的.html模板里，直接通过router.url判断当前路径，用*ngIf控制两个div的显示状态。假设你的首页路径是''或'/home'，关于页路径是'/about'（根据你实际的路由配置调整即可）：

<!-- 首页显示该div，关于页隐藏 -->
<div *ngIf="router.url === '' || router.url === '/home'">
  这是首页专属的内容区域
</div>

<!-- 关于页显示该div，首页隐藏 -->
<div *ngIf="router.url === '/about'">
  这是关于页专属的内容区域
</div>

进阶优化：用getter方法让逻辑更清晰 #

如果你的路由判断逻辑比较复杂，或者想让模板代码更简洁，可以在组件类里定义getter方法封装判断逻辑：

// 在组件类中添加两个getter
get isHomePage(): boolean {
  return this.router.url === '' || this.router.url === '/home';
}

get isAboutPage(): boolean {
  return this.router.url === '/about';
}

然后模板里就能用更直观的方式写判断了：

<div *ngIf="isHomePage">首页专属内容</div>
<div *ngIf="isAboutPage">关于页专属内容</div>

小提醒 #

• 确保你已经在项目中正确配置了路由模块（AppRoutingModule），并且判断的路径和实际路由配置完全匹配；
• 如果路由包含动态参数（比如/about/:id），router.url会带参数部分，这时候你可以用router.routerState.snapshot.root.firstChild?.routeConfig?.path来匹配路由的原始路径，或者通过router.events监听路由变化做更精确的判断。

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