Заголовок исчезает на Angular 7 роутере - PullRequest
Новая
       23

Заголовок исчезает на Angular 7 роутере

0 голосов
/ 19 ноября 2018

Я недавно обновил с угловой 5 до 7. После просмотра этой презентации Деборы Кураты из самой последней нг-конф, я решил обновить свой довольно ужасный код маршрутизации.

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

app.component.html 

<router-outlet></router-outlet>

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

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

import { AccessGuard }           from './shared/guards/access.guard';
import { LoginComponent }        from './login/login.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';

export const appRoutes: Routes = [
  { 
    path: 'login', 
    component: LoginComponent, 
    data: { requiresLogin: false },  
    canActivate: [ AccessGuard ] 
  },
  { path: '**', component: PageNotFoundComponent }
];

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

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

shell.component.html 

<app-header></app-header>
<router-outlet name="primary"></router-outlet>

оболочки routing.module.ts 

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

import { AccessGuard }        from '../shared/guards/access.guard';
import { DashboardComponent } from '../dashboard/dashboard.component';
import { ShellComponent }     from './shell.component';

export const shellRoutes: Routes = [
  { 
    path: '', 
    component: ShellComponent,
    data: { requiresLogin: true },
    canActivate: [ AccessGuard ],
    children: [
      { 
        path: 'dashboard', 
        component: DashboardComponent,
        data: { requiresLogin: true },
        canActivate: [ AccessGuard ] 
      },
      {
        path: 'posts',
        loadChildren: 'app/posts/posts.module#PostsModule'
      },
      {
        path: 'user-profile',
        loadChildren: 'app/user-profile/user-profile.module#UserProfileModule'
      }
    ]
  },
  { 
    path: '',
    redirectTo: '/dashboard', 
    pathMatch: 'full'
  }
];

@NgModule({
  imports: [ RouterModule.forChild(shellRoutes) ],
  exports: [ RouterModule ],
  providers: [ AccessGuard ]
})
export class ShellRoutingModule {}

Опять же, как вы видите, я лениво загружаю модули Posts и UserProfile. И, наконец, вышеупомянутый модуль маршрутов:

сообщений-routing.module.ts 

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

import { AccessGuard }    from '../shared/guards/access.guard';
import { PostsComponent } from './posts.component';
import { PostComponent }  from './post/post.component';

const postsRoutes: Routes = [
  {
    path: '',
    redirectTo: 'add',
    pathMatch: 'full'
  },
  {
    path: 'add',
    component: PostComponent,
    data: { requiresLogin: true },
    canActivate: [ AccessGuard ],
  },
  {
    path: 'comment/:id',
    component: PostComponent,
    data: { requiresLogin: true },
    canActivate: [ AccessGuard ],
  },
  {
    path: 'edit/:id',
    component: PostComponent,
    data: { requiresLogin: true },
    canActivate: [ AccessGuard ],
  } 
];

@NgModule({
  imports: [ RouterModule.forChild(postsRoutes) ],
  exports: [ RouterModule ],
  providers: [ AccessGuard ]
})
export class PostsRoutingModule { }

пользователь профильного routing.module.ts 

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

import { AccessGuard }  from '../shared/guards/access.guard';

import { UserProfileComponent }   from './user-profile.component';
import { FollowersComponent }     from './followers/followers.component';
import { FollowingComponent }     from './following/following.component';
import { MentorsComponent }       from './mentors/mentors.component';
import { CoachesComponent }       from './coaches/coaches.component';
import { NotificationsComponent } from './notifications/notifications.component';
import { AdminMentorComponent }   from './admin-mentor/admin-mentor.component';

const userProfileRoutes: Routes = [ 
  {
    path: 'user-profile',
    data: { requiresLogin: true },
    children: [
      {
        path: ':id',
        data: { requiresLogin: true },
        canActivate: [ AccessGuard ],
        children: [
          {
            path: '',
            component: UserProfileComponent,
          },
          {
            path: 'followers',
            component: FollowersComponent
          },
          {
            path: 'following',
            component: FollowingComponent
          },
          {
            path: 'mentors',
            component: MentorsComponent
          },
          {
            path: 'coaches',
            component: CoachesComponent
          },
          {
            path: 'notifications',
            component: NotificationsComponent
          }
        ]
      }
    ]
  }
];

@NgModule({
  imports: [ RouterModule.forChild(userProfileRoutes) ],
  exports: [ RouterModule ],
  providers: [ AccessGuard ]
})
export class UserProfileRoutingModule { }

Вопрос

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

EDIT

К сожалению, я не могу подражать поведению в StackBlitz. Все появляется. Я закомментирую свой код header.component и заменю его другим, чтобы увидеть, появится ли он.

РЕДАКТИРОВАТЬ 2

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

<input placeholder="How are you today?" routerLink="/posts/add">

Я вижу в дереве DOM, что выбран правильный маршрутизатор (тот, что находится в shell.component), а компонент post (app-post) расположен рядом с ним:

enter image description here

Однако компоненты для профиля пользователя этого не делают. Вместо этого они идут рядом с app.component, а не в shell.component. Я жестко запрограммировал маршрут к профилю пользователя так: 

<p routerLink="/user-profile/6">Testing testing</p>

для проверки, но получил тот же результат исчезающего заголовка.

enter image description here

Это действительно странное поведение для меня. Оба маршрута компонентов импортируются в shell-routing.module, поэтому их компоненты должны находиться рядом с ним.

Так что же дает?

Также - правильно ли я сказал, что когда вы пытаетесь перемещаться по "/ some-path / here", вы используете абсолютный путь вместо относительного, поэтому он должен работать? Doot doot

1 Ответ

0 голосов
/ 04 декабря 2018

Причина, по которой это происходит, заключается в том, что когда вы лениво загружаете модуль в Angular и определяете маршрут как дочерний, его родитель должен содержать router-outlet для добавления дочернего элемента, иначе он не будет работать.

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

ng serve --aot

чтобы изменения вступили в силу.

...