导航更改网址，但未查看

问题描述

我有一个带有登录组件的角度应用程序

此组件位于app/main/login

下

我想通过按钮从app.component.html进入

这是我的app-routing.module代码

    import { NgModule } from '@angular/core';
import { Routes,RouterModule } from '@angular/router';
import { LoginComponent } from './main/login/login.component';

const routes: Routes = [
  { path: 'main',children: [{ path: 'login',component: LoginComponent }] },];

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

这是我尝试使用路线<button mat-raised-button class="btn-default" [routerLink]="['/main/login']">Log in</button>

的方法

这是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';
import {MatButtonModule} from '@angular/material/button';
import {MainModule} from  './main/main.module'
@NgModule({
  declarations: [
    AppComponent
  ],imports: [
    browserModule,AppRoutingModule,MatButtonModule,MainModule
  ],providers: [],bootstrap: [AppComponent]
})
export class AppModule { }

这是main.module.ts

 import { browserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { LoginComponent } from './login/login.component';

@NgModule({
  declarations: [LoginComponent],imports: [browserModule],bootstrap: [],})
export class MainModule {}

当我单击按钮时，URL更改为http://localhost:4200/main/login，但视图未更改。

我该如何解决？

解决方法

查看您的代码，看来您正在尝试使用 lazy-loading 技术加载组件。 因此，在 AppRoutingComponent.ts 文件中，而不是将您的代码替换为：

const routes: Routes = [
  { path: 'main',loadChildren: '(path to main module)/main.module#MainModule' },];

用通俗易懂的话来说，这只是告诉父路由模块在遇到主路径时加载main.module。

现在在 Main.module 中，将子路由配置为：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { LoginComponent } from './login/login.component';

const routes: Routes = [
    { path: 'login',component: LoginComponent }
];

@NgModule({
  declarations: [LoginComponent],imports: [
             BrowserModule,RouterModule.forChild(routes) // Register routes for child module via forChild function instead of for Root
           ],providers: [],bootstrap: [],})
export class MainModule {}