Question

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

此组件位于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],
  providers: [],
  bootstrap: [],
})
export class MainModule {}

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

我该如何解决？

Answer 1

查看您的代码，看来您正在尝试使用 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 {}

导航更改网址，但未查看

1 个答案: