Angular 18独立组件路由异常：路由跳转失效求助

核心问题分析与修复方案 #

1. LandingComponent未正确注入Router服务 #

你的LandingComponent代码中没有导入并注入Router服务，这是导致router.navigate调用失效的最直接原因。独立组件中要使用路由功能，必须完成以下两步：

• 导入Router和RouterModule
• 在组件构造函数中注入Router实例

修正后的Landing.component.ts代码：

import { Component } from '@angular/core';
import { CardComponent } from '../../components/card/card.component';
import { cardcontent } from '../../models/cardContents';
import { Router } from '@angular/router'; // 新增Router导入
import { RouterModule } from '@angular/router'; // 新增RouterModule导入

@Component({
    selector: 'LandingComponent',
    standalone: true,
    imports: [CardComponent, RouterModule], // 将RouterModule加入导入列表
    templateUrl: './landing.component.html',
    styleUrl: './landing.component.scss',
})
export class LandingComponent {
  constructor(private router: Router) {} // 注入Router服务

  navigateToNextPhase() {
    this.router.navigate([this.data.continueUrl.url]);
  }
}

2. 跳转路径格式验证 #

检查this.data.continueUrl.url的实际值，针对性调整跳转写法：

• 如果是绝对路径（如"/calculation"）：当前数组写法[this.data.continueUrl.url]是正确的
• 如果是相对路径（如"calculation"）：需要添加relativeTo参数指定当前路由上下文，避免路径解析错误：

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

// 构造函数中同时注入ActivatedRoute
constructor(private router: Router, private route: ActivatedRoute) {}

navigateToNextPhase() {
  this.router.navigate([this.data.continueUrl.url], { relativeTo: this.route });
}

3. 检查控制台错误 #

打开浏览器开发者工具的控制台，查看是否存在类似Cannot read properties of undefined (reading 'navigate')的报错，这类信息可以直接定位到未注入Router的问题。

4. 路由通配符配置核对 #

你提到要将所有未知路径指向Landing组件，但当前路由配置中path: '**'指向的是Error组件，这与描述不符。如果需要将未知路径跳转到Landing，可修改路由配置：

{
  path: '**',
  loadComponent: () => import('./pages/landing/landing.component').then((mod) => mod.LandingComponent),
  title: environment.appTitle,
},

但此配置不影响calculation路径的直接访问，所以不是跳转失效的核心原因。

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