Angular 5：如何在同一页面渲染组件而非跳转至新页面

完全可以实现！你只需要调整组件的加载方式，从路由导航改成在当前组件内条件渲染，同时通过输入属性传递tripId就行，具体步骤如下：

1. 修改当前组件的模板 #

把原来的跳转按钮改成触发显示组件的点击事件，同时在现有内容下方添加Tripspath组件的标签，用*ngIf控制它的显示/隐藏：

<!-- 替换原routerLink按钮为点击事件 -->
<button mat-button color="primary" (click)="showTripRoute(trip.tripId)" style="cursor: pointer">
  View Route
</button>

<!-- 在当前页面内容下方放置Tripspath组件 -->
<app-tripspath 
  *ngIf="isRouteComponentVisible" 
  [tripId]="selectedTripId"
></app-tripspath>

<!-- 可选：添加关闭按钮来隐藏组件 -->
<button *ngIf="isRouteComponentVisible" mat-button (click)="hideTripRoute()">
  Hide Route
</button>

2. 更新当前组件的TypeScript逻辑 #

在组件类里定义控制显示状态的变量和存储选中tripId的变量，实现点击事件的处理方法：

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

@Component({
  // 你的组件元数据（selector、templateUrl等）
})
export class YourCurrentComponent {
  isRouteComponentVisible = false;
  selectedTripId: number | undefined;

  showTripRoute(tripId: number) {
    this.selectedTripId = tripId;
    this.isRouteComponentVisible = true;
  }

  hideTripRoute() {
    this.isRouteComponentVisible = false;
    this.selectedTripId = undefined;
  }
}

3. 修改Tripspath组件接收输入属性 #

把原来通过路由参数获取id的逻辑，改成通过@Input()接收外部传递的tripId：

import { Component, Input, OnInit } from '@angular/core';
// 如果不再需要路由参数，可以移除ActivatedRoute的导入

@Component({
  // Tripspath组件的元数据
})
export class TripspathComponent implements OnInit {
  // 添加输入属性接收tripId
  @Input() tripId!: number;

  ngOnInit() {
    // 替换原路由参数获取逻辑，直接使用this.tripId
    console.log('要加载的路线ID:', this.tripId);
    // 后续业务逻辑直接基于this.tripId处理即可
  }
}

这样调整后，点击"View Route"按钮就会在当前页面下方展示Tripspath组件，不会触发页面跳转；点击关闭按钮还能隐藏组件，完全满足你的需求。

内容的提问来源于stack exchange，提问作者Evik Ghazarian