路由到浏览器地址上的特定路径发送到 Angular 中的默认路由

Question

环境：

• 角度17

我在 Angular 中使用延迟加载，每次我尝试从浏览器地址访问 http://localhost:4200/question/edit/1 时，它都会重定向到 http://localhost:4200。它通过路由器链接完美运行。

我还创建了一个 RouterLoggingService 来查看每次更改的路由，但使用 URL http://localhost:4200/question/edit/1 ，路由器日志记录将打印并重定向到默认值。

RouterLogging change: / -> /user/login

知道如何解决这个问题吗？

路由器日志记录服务

@Injectable({
  providedIn: 'root',
})
export class RouterLoggingService {

  constructor(private router: Router) {
    console.log('RouterLoggingService loaded');
    
    this.router.events
      .pipe(filter((event) => event instanceof NavigationEnd))
      .subscribe((event: NavigationEnd) => {
        const url = event.url
        console.log("RouterLogging change:", event.url , event.urlAfterRedirects);
      });
  }
  
}

app-routes.module.ts

const routes: Routes = [
  { path: "", redirectTo: "user/login", pathMatch: "full" },
  {
    path: "question",
    loadChildren: () => import("./question/question.module").then((m)=> m.QuestionModule)
  },
  { path: "**", redirectTo: "user/login" },
];

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

问题路由.module.ts

const routes: Routes = [
  { path: 'list', component: QuestionListComponent },
  { path: ':id', component: QuestionDetailComponent, resolve: { Question: questionLoadResolveFn } },
  { path: 'edit/:id', component: QuestionEditComponent, resolve: { Question: questionLoadResolveFn } },
];

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

问题加载解析器.service.ts

export const questionLoadResolveFn: ResolveFn<Question> = (
  route: ActivatedRouteSnapshot
): Question | Observable<Question> | Promise<Question> => {
  const service = inject(QuestionService);
   

  const id = parseInt(route.paramMap.get("id"), 10);
  console.log('QuestionLoadResolver: ' + id);
  return service.findById(id);
};

Answer 1

对于独立版本，您需要以不同的方式导入基本路由，我们需要将路由数组提供给

provideRouter

的providers数组中的

bootstrapApplication

函数，下面是一个突出显示根级路由设置的工作示例！

main.ts

import { Component } from '@angular/core';
import {
  Routes,
  provideRouter,
  RouterLink,
  RouterOutlet,
} from '@angular/router';
import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';
import { LoginComponent } from './login/login.component';

const routes: Routes = [
  { path: '', redirectTo: 'user/login', pathMatch: 'full' },
  { path: 'user/login', component: LoginComponent },
  {
    path: 'question',
    loadChildren: () =>
      import('./question/question.module').then((m) => m.QuestionModule),
  },
  { path: '**', redirectTo: 'user/login' },
];

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, RouterLink],
  template: `
  <a routerLink="question/edit/1">question edit</a> | 
  <a routerLink="question/list">question list</a> | 
  <a routerLink="question/1">question detail</a>
    <router-outlet/>
  `,
})
export class App {
  name = 'Angular';
}

bootstrapApplication(App, {
  providers: [provideRouter(routes)],
});

问题路由.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { QuestionDetailComponent } from './question-detail/question-detail.component';
import { QuestionEditComponent } from './question-edit/question-edit.component';
import { QuestionListComponent } from './question-list/question-list.component';

const routes: Routes = [
  { path: 'list', component: QuestionListComponent },
  {
    path: ':id',
    component: QuestionDetailComponent,
  },
  {
    path: 'edit/:id',
    component: QuestionEditComponent,
  },
];

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

堆栈闪电战