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

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

Это мой код:

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

Приложение - 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.

enter image description here

Затем:

enter image description here

Я не уверен, правильно ли я выполняю отложенную загрузку. Буду очень признателен за любое предложение.

1
mtorreblanca 25 Окт 2019 в 18:17

2 ответа

Лучший ответ

Ваша архитектура отложенной загрузки неверна, я рекомендую вам не использовать общий модуль для боковой панели, вместо этого поместите его в ваш домашний компонент и измените его исходный маршрут по умолчанию. Так что это ваш глобальный родительский компонент. Затем используйте дочерние компоненты с ленивой загрузкой.

Чтобы использовать свой модуль входа в систему, используйте охрану, чтобы перенаправить его в Home Lazy Loading Routing.

Редактировать 1: Кстати, у вас есть проблема с вашими якорями, у вас есть ссылка внутри каждой из ваших ссылок

 <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
dfloresdev 25 Окт 2019 в 16:12

У вас не должно быть ленивой загрузки в вашем 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 { }
3
Michael Desigaud 25 Окт 2019 в 15:24
58561300