Html 在Angular 8中使用共享组件进行延迟加载

我就是找不到这个问题的答案。我正在使用导航栏创建一个简单的主页，但我正在将导航栏添加为一个共享组件，以便在其他组件中重用它

问题是，当我尝试使用导航栏加载新路由时，导航栏无法加载路由

这是我的代码：

Ng-版本：

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.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 { }

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 { }

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 { }

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.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 { }

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 { }

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 { }

主页HTML:

<div class="homeContainer">
    <!-- Sidebar  -->
    <div class="navbar">
        <app-navbar></app-navbar>

    </div>

    <!-- Page Content  -->
    <div id="content">

        <router-outlet></router-outlet>

    </div>

</div>

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>

shared.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 { }

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 { }

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后，route显示为a/homeSubmenu

然后：

我不确定是否正确实现了延迟加载。

---

如果有任何建议，我将不胜感激

您不应该在SharedModule中延迟加载。您需要在AppRoutingModule中移动所有惰性路由声明：

---

您不应该在SharedModule中延迟加载。您需要在AppRoutingModule中移动所有惰性路由声明：

---

您的延迟加载结构不正确，我建议您不要为侧栏使用共享模块，而是将其放在主组件中，并将其原始路径更改为默认路径。因此，它是您的全局父组件。然后使用延迟加载的子组件

要使用您的登录模块，请在主延迟加载路由中使用一个防护重定向它

编辑1： 顺便说一句，你的锚有问题，你的每个链接中都有一个href

 <li routerLink="home" routerLinkActive="active">
    <!-- Here is your error for the submenu -->
   <a href="#homeSubmenu">
     <i class="fa fa-home"></i>
        Home
    </a>
 </li>

---

检查它。

您的延迟加载结构不正确，我建议您不要为侧栏使用共享模块，而是将其放在主组件中，并将其原始路径更改为默认路径。因此，它是您的全局父组件。然后使用延迟加载的子组件

要使用您的登录模块，请在主延迟加载路由中使用一个防护重定向它

编辑1： 顺便说一句，你的锚有问题，你的每个链接中都有一个href

 <li routerLink="home" routerLinkActive="active">
    <!-- Here is your error for the submenu -->
   <a href="#homeSubmenu">
     <i class="fa fa-home"></i>
        Home
    </a>
 </li>

看看吧