Javascript 导航更改url，但不更改视图

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

此组件位于

app/main/login

我想通过按钮从

app.component.html

转到它

这是我的

应用程序路由。模块
代码

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

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

下面是我如何尝试使用route
Log-in

下面是
app.module.ts
code

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

    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
但视图未更改

如何修复此问题？
查看您的代码，您似乎正在尝试使用延迟加载技术加载组件。
因此，在AppRoutingComponent.ts文件中，您的代码将其替换为：

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

用外行术语来说，这只是告诉父路由模块在遇到主路径时加载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 {}

您的AppComponent中是否有
？是的，我在AppComponent@Gérômegrigon中有它。请根据您的示例检查此工作示例，看看是否有差异：