Угловые маршруты не работают должным образом для импортированного модуля - PullRequest
Новая
       5

Угловые маршруты не работают должным образом для импортированного модуля

0 голосов
/ 18 марта 2019

Редактировать: Изменение форумов-routing.module.ts с { path: '', component: ForumsComponent } на { path: 'forums', component: ForumsComponent } сделало маршрутизацию работающей, как и ожидалось, но для меня не имеет смысла, почему мне нужно было это указать. Если бы этот модуль работал как полностью автономный модуль, я бы хотел, чтобы он направлял на /, а не / форумы, а затем, при включении его в качестве модуля, выберите, какие маршруты маршрутов здесь, вместо того, чтобы принудительно использовать "форумы"

Я довольно новичок в угловой. Я пытаюсь создать подмодуль в моем приложении, модуль форумов. Я в основном хочу, чтобы маршруты выглядели так:

  • /
    • Главная
  • / форумы
    • Главная страница форумов (будут отображаться категории форумов)
  • / форумы /: категория
    • Будут отображаться сообщения в указанной категории
  • / форум /: категория / новый
    • Откроется новая почтовая составляющая, которая будет сделана в указанной категории
  • / форумы /: категория /: сообщения дан
    • Откроет определенный пост в указанной категории

Однако каким-то образом моя маршрутизация игнорирует маршрутизацию в моем app-routing.module и пропускает прямо в мой forum-routing.module. (так localhost / ведет меня на форумы, localhost / categoryId ведет к деталям этой категории и т. д.). Я слежу за тем, как я выучил «Полное руководство по Angular 2» в Udemy и приложении, которое он создает в этом курсе, но даже если мне кажется, что я делаю все то же самое, это как-то не так.

Мне кажется, что мне не хватает какой-то мелкой детали ... в любом случае, я настроил свои модули следующим образом

приложение маршрутизации-модуль: 

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { ForumsComponent } from './forums/forums.component';

const routes: Routes = [
  { path: '', component: HomeComponent},
  { path: 'forums', component: ForumsComponent }
];

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

app.module 

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { ForumsModule } from './forums/forums.module';
import { HomeComponent } from './home/home.component';


@NgModule({
  declarations: [
    AppComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    ForumsModule,
    AppRoutingModule
  ],
  providers: [UsersService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Форумы маршрутизации-модуль: 

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ForumsComponent } from './forums.component';
import { CategoryDetailComponent } from './categories/category-detail/category-detail.component';
import { PostDetailComponent } from './posts/post-detail/post-detail.component';
import { NewPostComponent } from './posts/new-post/new-post.component';
import { CategoryGroupComponent } from './categories/category-group/category-group.component';

const forumsRoutes: Routes = [
    { path: '', component: ForumsComponent, children: [
        { path: '', component: CategoryGroupComponent },
        { path: ':category', component: CategoryDetailComponent },
        { path: ':category/new', component: NewPostComponent },
        { path: ':category/:postId', component: PostDetailComponent }
    ]},
];

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

forums.module 

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

import { ForumsComponent } from './forums.component';
import { CategoryGroupComponent } from './categories/category-group/category-group.component';
import { CategoryItemComponent } from './categories/category-item/category-item.component';
import { PostDetailComponent } from './posts/post-detail/post-detail.component';
import { CategoryDetailComponent } from './categories/category-detail/category-detail.component';
import { PostReplyComponent } from './posts/post-detail/post-reply/post-reply.component';
import { PostItemComponent } from './posts/post-item/post-item.component';
import { NewPostComponent } from './posts/new-post/new-post.component';
import { ForumsRoutingModule } from './forums-routing.module';

@NgModule({
  declarations: [
    ForumsComponent,
    CategoryGroupComponent,
    CategoryItemComponent,
    CategoryDetailComponent,
    PostDetailComponent,
    PostReplyComponent,
    PostItemComponent,
    NewPostComponent
  ],
  imports: [
    CommonModule,
    ForumsRoutingModule
  ]
})
export class ForumsModule { }

app.component: 

<div class="content">
  <div class="container-fluid">
    <router-outlet></router-outlet>
  </div>
</div>

и, наконец, forums.component: 

<p>
  forums works!
  <router-outlet></router-outlet>
</p>

1 Ответ

1 голос
/ 18 марта 2019

Ваш app-routing.module.ts должен загрузить ForumsModule, а не ForumsComponent

приложение-routing.module.ts 

const routes: Routes = [
  { path: '', component: HomeComponent},
  { path: 'forums', loadChildren: './forums/forums.module#ForumsModule' }
];

app.module не нужно импортировать ForumsModule, так как он будет загружен с отложенным доступом

app.module.ts 

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [UsersService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Пути forums-routing.module.ts наследуют путь forums от app-routing. Вы должны быть в состоянии использовать пустой путь. Но есть проблема с наличием нескольких пустых путей. Маршрут к FourmsComponent и CategoryGroupComponent разрешается по тому же пути /forums. Вы могли бы сделать что-то вроде маршрутизации ниже.

форум-routing.module.ts 

const forumsRoutes: Routes = [
    { path: '', component: ForumsComponent, children: [
        { path: 'category', component: CategoryGroupComponent, children: [
            { path: ':category', component: CategoryDetailComponent },
            { path: ':category/new', component: NewPostComponent },
            { path: ':category/:postId', component: PostDetailComponent }
        ]}
    ]},
];

Это даст вам следующие пути для forums-routing.module.ts

/forums                        (ForumsComponent)
/forums/category               (CategoryGroupComponent)
/forums/category/:id           (CategoryDetailComponent)
/forums/category/:id/new       (NewPostComponent)
/forums/category/:id/:postId   (PostDetailsComponent) <- not sure if this works you'll have to try it.

https://angular.io/guide/lazy-loading-ngmodules

...