Frage Mehrere Module und Routing in eckigen 5


Kann mir jemand sagen, wie korrekt das Routing eingerichtet wird, wenn mehrere Module in meinem Projekt verwendet werden? Ich habe app.module und courses.module mit einigen Komponenten in deklariert. Ich möchte wissen, wie man Module verbindet und richtig Routing in courses.module, das ist gemeinsame Routen: "/ Kurse / Liste" und "/ Kurse / Detail"

app.routing.module.ts

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

//import { CoursesRoutingModule } from './components/courses/courses-routing.module';

const routes: Routes = [
  {
    path: 'courses',
    loadChildren: './components/courses/courses-routing.module#CoursesRoutingModule' 
  }
];

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

app.component.html

<h1>App.component</h1>
<p>
    <button routerLink="/">HOME</button>
    <button routerLink="/courses">KURSY</button>
</p>
<router-outlet></router-outlet>

Und hier ist Kurskomponente:

courses.routing.module.ts

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

import { CoursesComponent } from './courses.component';
import { CoursesDetailComponent } from './components/courses-detail/courses-detail.component';
import { CoursesListComponent } from './components/courses-list/courses-list.component';

const routes: Routes = [
//  {
//    path: 'courses',
//    loadChildren: '/src/app/components/courses/courses.module'
//  }
//  ,
//  {
//    path: 'courses/list',
//    component: CoursesListComponent,
//    outlet: 'courseslist'
//  }
];

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

courses.component.html:

<p>
    <button routerLink="/">HOME</button>
    <button routerLink="/courses/list">list</button>
    <button routerLink="/courses/detail">detail</button>
</p>

7
2017-11-17 14:42


Ursprung


Antworten:


Hier ist, wie ich es mache:

app.module.ts

import {ModuleRouting} from './app.routing';

@NgModule({
    declarations: [
        AppComponent,
    ],
    imports: [
        ModuleRouting,
        SubmoduleModule         
    ]
    bootstrap: [AppComponent]
})
export class AppModule {
}

app.routing.ts

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

const routes: Routes = [
    {path: 'submodule', loadChildren: 'app/submodule/submodule.module#SubModule'},
];

export const ModuleRouting: ModuleWithProviders = RouterModule.forRoot(routes);

submodul.module.ts

import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {ModuleRouting} from './submodule.routing';

@NgModule({
    imports: [
        CommonModule,
        ModuleRouting
    ],
    declarations: [
        //...
    ]
})
export class SubmoduleModule {
}

submodul.routing.ts

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

const routes: Routes = [
    {
        path: '',
        component: SomeComponent,
    },
    {
        path: 'other',
        component: SomeOtherComponent,
    }
];

export const ModuleRouting: ModuleWithProviders = RouterModule.forChild(routes);

21
2017-11-17 14:52



app.routing.module.ts

const routes: Routes = [
  {
    path: '',
    children: [
      { path: 'courses', loadChildren: './components/courses/courses-routing.module#CoursesRoutingModule' }
    ]
  }
];

courses.routing.module.ts

const routes: Routes = [
  {
    path: '',
    children: [
      { path: 'list', component: CoursesListComponent}
    }
  }
];

Ich würde es so machen. Probieren Sie es selbst aus und sehen Sie, wie es geht.


0
2017-11-17 15:00