Angular点击跳转至其他组件页面问题咨询

问题修正与实现方案 #

首先你代码里存在语法错误：组件类中this.router.navigate(['/insights']);写在了ngOnInit方法外部，这会导致代码无法正常运行。以下是两种正确的实现方式：

方式一：模板中直接使用 routerLink（推荐） #

直接给每个Firms列表项添加routerLink指令，点击即可跳转。修改你的HTML模板：

<div class="container">
  <div class="row">
    <div class="col-12">
      <div class="list-group">
        <!-- 将列表项改为a标签并绑定routerLink -->
        <a 
          class="list-group-item" 
          *ngFor="let firm of firms | async"
          [routerLink]="['/insights']"
        >
          {{ firm.hash }} - {{ firm.name }}
        </a>
        <div class="list-group-item">
          <a href="http://google.com">
            Create new
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

如果不想改成<a>标签，也可以给原<div>绑定routerLink：

<div 
  class="list-group-item" 
  *ngFor="let firm of firms | async"
  [routerLink]="['/insights']"
>
  {{ firm.hash }} - {{ firm.name }}
</div>

方式二：通过组件类点击事件调用 router.navigate #

第一步：修正组件类代码 #

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

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  constructor(private router: Router) { }

  ngOnInit(): void {
    // 初始化时跳转的逻辑写在这里（如果需要）
  }

  // 定义点击跳转方法
  navigateToInsights(): void {
    this.router.navigate(['/insights']);
  }
}

第二步：修改模板绑定点击事件 #

<div class="container">
  <div class="row">
    <div class="col-12">
      <div class="list-group">
        <div 
          class="list-group-item" 
          *ngFor="let firm of firms | async"
          (click)="navigateToInsights()"
        >
          {{ firm.hash }} - {{ firm.name }}
        </div>
        <div class="list-group-item">
          <a href="http://google.com">
            Create new
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

关键前提：确保路由配置正确 #

在app-routing.module.ts中必须配置/insights对应的路由规则，示例如下：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { InsightsComponent } from './insights/insights.component'; // 导入目标组件

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'insights', component: InsightsComponent }, // 配置该路由
  { path: '**', redirectTo: '' } // 可选：404页面跳转规则
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

同时要保证app.component.html中存在<router-outlet></router-outlet>标签，用于渲染路由对应的组件。

内容的提问来源于stack exchange，提问作者new brain