Я просто не могу найти ответ на этот вопрос. Я делаю простую домашнюю страницу с панелью навигации, но я добавляю панель навигации как общий компонент, чтобы я могла повторно использовать ее внутри других компонентов.
Проблема в том, что, когда я пытаюсь перейти на новый ленивый маршрут, загруженный с помощью навигационной панели, навигационная панель просто не может загрузить маршрут.
Это мой код:
Нг - Версия:
Angular CLI: 8.2.2
Node: 10.13.0
OS: win32 x64
Angular: 8.2.8
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Package Version
-----------------------------------------------------------
@angular-devkit/architect 0.802.2
@angular-devkit/build-angular 0.802.2
@angular-devkit/build-optimizer 0.802.2
@angular-devkit/build-webpack 0.802.2
@angular-devkit/core 8.2.2
@angular-devkit/schematics 8.2.2
@angular/cli 8.2.2
@ngtools/webpack 8.2.2
@schematics/angular 8.2.2
@schematics/update 0.802.2
rxjs 6.4.0
typescript 3.5.3
webpack 4.38.0
app.html:
<router-outlet></router-outlet>
app.component.ts:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'dashboard-syngenta';
}
app.module.ts:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
{ path: '', loadChildren: './login/login.module#LoginModule'}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
login.component.html
<div class="loginContainer">
<div class="row">
<div class="col-12 text-center">
<button class="btn btn-submit" type="button" routerLink="home">Ingresar</button>
</div>
</div>
</div>
login.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
login.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LoginComponent } from './login.component';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
{ path: '', component: LoginComponent },
{ path: 'home', loadChildren: '../home/home.module#HomeModule' }
];
@NgModule({
declarations: [LoginComponent],
imports: [
CommonModule,
RouterModule.forChild(routes)
]
})
export class LoginModule { }
Домашняя страница HTML:
<div class="homeContainer">
<!-- Sidebar -->
<div class="navbar">
<app-navbar></app-navbar>
</div>
<!-- Page Content -->
<div id="content">
<router-outlet></router-outlet>
</div>
</div>
HomeComponent.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
HomeModule.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HomeComponent } from './home.component';
import { Routes, RouterModule } from '@angular/router';
import { SharedModule } from '../shared/shared.module';
const routes: Routes = [
{ path: '', component: HomeComponent }
];
@NgModule({
declarations: [HomeComponent],
imports: [
CommonModule,
RouterModule.forChild(routes),
SharedModule
]
})
export class HomeModule { }
navbar.component.html
<div class="wrapper">
<!-- Sidebar -->
<nav id="sidebar" [ngClass]="{'active': toggleActive}">
<div class="sidebar-header">
<h3>Syngenta Admin</h3>
<strong>SA</strong>
</div>
<ul class="list-unstyled components">
<li routerLink="home" routerLinkActive="active">
<a href="#homeSubmenu">
<i class="fa fa-home"></i>
Home
</a>
</li>
<li routerLink="usuarios" routerLinkActive="active">
<a href="#">
<i class="fa fa-user" aria-hidden="true"></i>
Usuarios
</a>
</li>
<li routerLink="productos" routerLinkActive="active">
<a href="#pageSubmenu">
<i class="fa fa-truck"></i>
Productos
</a>
</li>
</ul>
</nav>
</div>
navbar.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-navbar',
templateUrl: './navbar.component.html',
styleUrls: ['./navbar.component.scss']
})
export class NavbarComponent implements OnInit {
toggleActive = true;
constructor() { }
ngOnInit() {
}
activeSidebar() {
this.toggleActive = !this.toggleActive;
}
}
shared.module. ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { NavbarComponent } from './navbar/navbar.component';
import { RouterModule, Routes } from '@angular/router';
const routes: Routes = [
{ path: 'home', loadChildren: '../home/home.module#HomeModule' }
];
@NgModule({
declarations: [NavbarComponent],
imports: [
CommonModule,
RouterModule.forChild(routes)
],
exports: [NavbarComponent]
})
export class SharedModule { }
Тогда после того, как я щелкну на routeLink внутри панели навигации, маршрут будет называться / # homeSubmenu.
Тогда:
Я не уверен, еслиЯ реализую ленивую загрузку правильно. Буду очень признателен за любое предложение.