Question

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

问题是，当我尝试转到使用导航栏延迟加载的新路由时，导航栏无法加载该路由。

这是我的代码：

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.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。

然后：

我不确定我是否正确实现了延迟加载。我真的很感谢任何建议。

Answer 1

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

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


const routes: Routes = [
  { path: '', loadChildren: './login/login.module#LoginModule'},
  { path: 'home', loadChildren: '../home/home.module#HomeModule' },
  etc...
];

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

Answer 2

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

要使用登录模块，请使用保护程序将其重定向到本地延迟加载路由中。

编辑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>

检查一下。

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

2 个答案: