Angular 8 Дочерние маршруты не работают из компонента - PullRequest
Новая
       53

Angular 8 Дочерние маршруты не работают из компонента

0 голосов
/ 09 марта 2020

У меня странная проблема, я клонировал ngx-admin и пытаюсь использовать тему в качестве базовой темы.

Я создал Layout Components с Modules с включенным Routing. Созданы маршруты и подключенные компоненты, но проблема в том, что маршруты работают нормально, если я открываю их по ссылке напрямую. Но когда я пытаюсь использовать router.navigate для перенаправления, маршруты не работают.

ниже находятся мои файлы

app-routing.module.ts 

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

import { DashboardLayoutComponent } from './layouts/dashboard-layout/dashboard-layout.component';
import { AuthenticationLayoutComponent } from './layouts/authentication-layout/authentication-layout.component';

const routes = [
  {
    path: '',
    redirectTo: 'app',
    pathMatch: 'full',
  },
  {
    path: '',
    component: DashboardLayoutComponent,
    children: [
      {
        path: 'app',
        loadChildren: () => import('./layouts/dashboard-layout/dashboard-layout.module').then(m => m.DashboardLayoutModule)
      }
    ]
  },
  {
    path: '',
    component: AuthenticationLayoutComponent,
    children: [
      {
        path: 'auth',
        loadChildren: () => import('./layouts/authentication-layout/authentication-layout.module').then(m => m.AuthenticationLayoutModule)
      }
    ]
  },
  {
    path: '**',
    redirectTo: 'app'
  }
];

export const AppRoutingModule : Routes = routes;

app.module.ts 

@NgModule({
  declarations: [
    AppComponent,
    DashboardLayoutComponent,
    AuthenticationLayoutComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    HttpClientModule,
    RouterModule.forRoot(AppRoutingModule),
    CookieModule.forRoot(),
    ThemeModule.forRoot(),
    NbSidebarModule.forRoot(),
    NbMenuModule.forRoot(),
    NbWindowModule.forRoot(),
    NbToastrModule.forRoot(),
    CoreModule.forRoot(),
    FormsModule,
    ReactiveFormsModule
  ],
  providers: [AuthGuard, AuthService],
  bootstrap: [AppComponent],
})
export class AppModule {
}

auth-layout.routing.ts 

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

import { LoginComponent } from '../../pages/auth/login/login.component';
import { ForgotComponent } from '../../pages/auth/forgot/forgot.component';
import { VerifyComponent } from '../../pages/auth/verify/verify.component';

export const AuthenticationLayoutRoutingModule : Routes = [
  { path: '', redirectTo: 'login', pathMatch: 'full' },
  { path: 'login', component: LoginComponent },
  { path: 'forgot', component: ForgotComponent },
  { path: 'verify/invite/:_hash', component: VerifyComponent},
  { path: '**', redirectTo: 'login' }
]

auth-layout.module.ts 

@NgModule({
  declarations: [
    LoginComponent,
    ForgotComponent,
    VerifyComponent
  ],
  imports: [
    CommonModule,
    RouterModule.forChild(AuthenticationLayoutRoutingModule),
    ThemeModule,
    NbAlertModule,
    FormsModule,
    ReactiveFormsModule,
    NbPopoverModule,
    NbCardModule,
    NbIconModule
  ],
})
export class AuthenticationLayoutModule { }

Я пытаюсь перейти от компонента Verify к компоненту входа, ниже приведен код 

constructor(private router: Router, private activatedRoute: ActivatedRoute, private authService: AuthService, private toastrService: NbToastrService) {}

  ngOnInit() {
    this.router.navigate['/auth/login'];
  }

Но если я воспользуюсь приведенным ниже кодом , Он будет правильно перенаправлять 

<a [routerLink]="['/auth/login']">Click to redirect</a>

Пожалуйста, скажите мне, если я делаю что-то не так.

1 Ответ

1 голос
/ 09 марта 2020

Вы не правильно звоните router.navigate. Это функция, которая должна вызываться следующим образом: 

ngOnInit() {
  this.router.navigate(['/auth/login']);
}

Шаблоны модулей маршрутизатора

В несвязанной проблеме ваши модули маршрутизации объявляются в замешательстве. То, что вы называете модулями, на самом деле не является модулями.

Типичными шаблонами могут быть:

app.module.ts 

const appRoutes: Routes = [
  // ... routes here
];

@NgModule({
  imports: [
    RouterModule.forRoot(appRoutes)
  ]
})
export class AppModule { }

ИЛИ

app-routing. module.ts 

const appRoutes: Routes = [
  // ... routes here
];

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

app.module.ts 

@NgModule({
  imports: [
    AppRoutingModule
  ]
})
export class AppModule { }

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

...