Mehrere Module und routing im Winkel 5

kann jemand mir sagen, wie korrekt einrichten, routing, wenn mehrere Module in meinem Projekt? Ich habe die app.module und Kurse.Modul mit einigen Komponenten deklariert. Ich möchte wissen, wie die connect-Module und Bearbeiten die Weiterleitung in die Kurse.Modul, das teilen von Routen: "/Kurse/list" und "/Kurse/Details -"

app.routing.- Modul.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 Kurse-Komponente:

Kurse.routing.- Modul.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>

InformationsquelleAutor Osmiornica najszybszy kucharz | 2017-11-17

  1. 27

    Hier ist, wie ich es mache:

    app.- Modul.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.- Modul.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);
    Sie können hinzufügen, Submodul importiert werden soll, indem AppModule in diesem Fall
    Ich bin mit der app-routing.- Modul.ts erstellt durch eckige cli, in deiner Lösung sehe ich Modul.routing.ts. Ich Wette, Sie haben Sie geschaffen, indem Sie eigene. Ein Modul ist, weiter ist als gekapselte Logik-Datei. Was ist der richtige Weg?
    Meinst du so wie in dieser Datei github.com/johnpapa/angular-tour-of-heroes/blob/master/src/app/... @Osmiornicanajszybszykucharz?
    Ja, genau. Behandelt wird, als moudle. Ist Dies etwas ändern?
    Sie umfasst die Module-Namen, wenn Sie wollen export const SubmoduleRouting: ...

    InformationsquelleAutor Riscie

  2. 1

    app.routing.- Modul.ts

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

    Kurse.routing.- Modul.ts

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

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

    Ich erhielt den Fehler: "Komponente CoursesListComponent ist nicht Teil einer NgModule oder das Modul wurde nicht importiert-Modul." auch habe ich importiert diese Komponente in der Lehre.- Modul.ts-und-Kurse-routing.- Modul.ts.
    haben Sie erklärt Ihre CoursesListComponent in beiden Kursen Modul oder das app-Modul? also fügen Sie es zu den Erklärungen.
    es ' s arbeitete für mich, vielen Dank @woodykiddy

    InformationsquelleAutor woodykiddy

Schreibe einen Kommentar