Angular路由结合ActivatedRoute实现URL对应切换指定组件的问题

看起来你已经走对路子啦！已经成功通过ActivatedRoute拿到了路由参数，接下来只需要在模板里结合Angular的条件渲染指令，就能根据不同URL显示对应的组件了，我给你一步步说清楚怎么实现：

第一步：完善组件类的参数处理 #

首先确保你的name变量初始值明确，这样空路径时能正确匹配：

// homepage.component.ts
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-homepage',
  templateUrl: './homepage.component.html',
  styleUrls: ['./homepage.component.css']
})
export class HomepageComponent implements OnInit {
  name = ''; // 初始化为空字符串，对应根路径'/'

  constructor(public route: ActivatedRoute) {}

  ngOnInit(): void {
    this.route.paramMap.subscribe((params) => {
      // 拿到路由参数，为空时设成空字符串
      this.name = params.get('property') || '';
      console.log(this.name);
    });
  }
}

第二步：在模板中添加条件渲染 #

你有两种常用的方式来实现组件的切换，选哪种都可以：

方式一：使用*ngIf指令

直接针对每个组件写判断条件，逻辑清晰直观：

<!-- homepage.component.html -->
<app-header-slider></app-header-slider>
<app-content></app-content>

<!-- 根据路由参数显示对应组件 -->
<app-test *ngIf="name === ''"></app-test>
<app-test-one *ngIf="name === 'test-one'"></app-test-one>
<app-test-two *ngIf="name === 'test-two'"></app-test-two>

<app-blog></app-blog>
<app-accordion></app-accordion>

方式二：使用ngSwitch指令

如果以后需要添加更多组件，这种方式会更易于维护：

<!-- homepage.component.html -->
<app-header-slider></app-header-slider>
<app-content></app-content>

<!-- 使用ngSwitch统一管理组件切换 -->
<div [ngSwitch]="name">
  <app-test *ngSwitchCase="''"></app-test>
  <app-test-one *ngSwitchCase="'test-one'"></app-test-one>
  <app-test-two *ngSwitchCase="'test-two'"></app-test-two>
  <!-- 可选：当参数不在预期范围内时，显示默认组件 -->
  <app-test *ngSwitchDefault></app-test>
</div>

<app-blog></app-blog>
<app-accordion></app-accordion>

可选优化：限制路由参数的有效值 #

当前你的路由path: ":property"会匹配任何字符串，如果你想只允许test-one和test-two这两个参数，可以给路由添加校验：

// app-routing.modules.ts
const routes: Routes = [
  {
    path: "",
    component: HomepageComponent,
    pathMatch: "full",
  },
  // 使用正则限制参数只能是test-one或test-two
  { 
    path: ":property", 
    component: HomepageComponent,
    pathMatch: 'prefix',
    // 也可以通过data传递允许的参数列表，方便组件里校验
    data: { allowedProperties: ['test-one', 'test-two'] }
  },
];

然后在组件里加强校验，避免非法参数导致组件显示异常：

// homepage.component.ts
ngOnInit(): void {
  this.route.paramMap.subscribe((params) => {
    const property = params.get('property');
    const allowedProperties = this.route.snapshot.data['allowedProperties'] || [];
    
    // 只有参数在允许列表里或者为空时，才赋值，否则设为空
    this.name = (allowedProperties.includes(property!) || property === null) ? property || '' : '';
    console.log(this.name);
  });
}

这样就能完美实现你的需求啦：根路径/显示<app-test>，/test-one显示<app-test-one>，/test-two显示<app-test-two>，其他内容保持不变~

备注：内容来源于stack exchange，提问作者Dario B.