javascript - Angular 路由错误和正确的方法？

Question

我一直在学习如何将 Angular 与我的 ruby​​ on rails 应用程序一起使用，但在路由方面遇到了一些问题

这是我的 app.routing 文件:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

//Layouts
import { FullLayoutComponent } from './layouts/full-layout.component';

export const routes: Routes = [
  { path: '', redirectTo: 'dashboard', pathMatch: 'full', },

  {
    path: '', component: FullLayoutComponent, data: { title: 'Página Inicial' },
    children:
    [{ path: 'dashboard', loadChildren: './dashboard/dashboard.module#DashboardModule' },
    { path: 'organizations', loadChildren: './organizations/organizations.module#OrganizationsModule' },     
    ]
  },
];

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

这是 organizations.module 文件:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

//Routing
import { OrganizationsRoutingModule } from './organizations-routing.module';

@NgModule({
  imports: [
    OrganizationsRoutingModule
  ],
  declarations: []
})
export class OrganizationsModule{ }

这是 organizations-routing.module 文件:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { OrganizationsComponent } from './organizations.component';
import { OrganizationFormComponent } from './organization-form/organization-form.component';
import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';

const routes: Routes = [
  {
    path: '', pathMatch: 'full', component: OrganizationsComponent,
    data: { title: 'Organizações' },
    children: [

      {
        path: 'new', component: OrganizationFormComponent,
        data: { title: 'Cadastrar nova Organização' }
      },
      {
        path: ':id', component: OrganizationFormComponent,
        data: { title: 'Mostrar Organização' }
      },
      {
        path: ':id/edit', component: OrganizationFormComponent,
        data: { title: 'Editar Organização' }
      },
    ]
  },
];

@NgModule({
  imports: [RouterModule.forChild(routes), CommonModule, FormsModule],
  exports: [RouterModule],
  declarations:[OrganizationsComponent, OrganizationFormComponent]
})
export class OrganizationsRoutingModule { }

这样做，/organizations 路径有效，但/organizations/new 不行，我在控制台上收到此错误:

我尝试过的其他方法是将所有内容都放在 app.routing 上，结果如下:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

//Layouts
import { FullLayoutComponent } from './layouts/full-layout.component';
import { OrganizationsComponent } from './organizations/organizations.component';
import { OrganizationFormComponent } from './organizations/organization-form/organization-form.component';

export const routes: Routes = [
  { path: '', redirectTo: 'dashboard', pathMatch: 'full', },

  {
    path: '', component: FullLayoutComponent, data: { title: 'Página Inicial' },
    children:
    [{ path: 'dashboard', loadChildren: './dashboard/dashboard.module#DashboardModule' },    
      {
        path: 'organizations', pathMatch: 'full', component: OrganizationsComponent,
        data: { title: 'Organizações' },
      },
      {
        path: 'organizations/new', component: OrganizationFormComponent,
        data: { title: 'Cadastrar nova Organização' }
      },
      {
        path: 'organizations/:id', component: OrganizationFormComponent,
        data: { title: 'Mostrar Organização' }
      },
      {
        path: 'organizations/:id/edit', component: OrganizationFormComponent,
        data: { title: 'Editar Organização' }
      },
    ]
  },
];

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

这是可行的，但据我所知，这不是最好的方法。

我应该如何构建我的路线？

谢谢!

Answer 1

你的逻辑有很多错误

首先，为什么要将 '' 重定向到 'dashboard' 然后让 'dashboard' 成为 '' ??

此外，当 path: '' 有子项时，您永远不应该使用 pathMatch: 'full'

我认为您应该执行以下操作:

app-routing.module.ts

export const routes: Routes = [
  {
    path: '', component: FullLayoutComponent, data: { title: 'Página Inicial' },
    children: [
        { path: '', redirectTo: 'dashboard' },
        { path: 'dashboard', loadChildren: './dashboard/dashboard.module#DashboardModule' },
        { path: 'organizations', redirectTo: '/organizations' },     
      ]
    },
];

organizations-routing.module

const routes: Routes = [
  {
    path: 'organizations', component: OrganizationsComponent,
    data: { title: 'Organizações' },
    children: [
      {
        path: 'new', component: OrganizationFormComponent,
        data: { title: 'Cadastrar nova Organização' }
      },
      {
        path: ':id', component: OrganizationFormComponent,
        data: { title: 'Mostrar Organização' }
      },
      {
        path: ':id/edit', component: OrganizationFormComponent,
        data: { title: 'Editar Organização' }
      },
    ]
  },
];