角度路由错误和正确的方法吗？

Question

我一直在学习使用我的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'成为''的孩子？

当pathMatch: 'full'有孩子

时，你永远不应该使用path: ''

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

应用-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' },     
      ]
    },
];

<强>组织-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' }
      },
    ]
  },
];