Angular 2+，路由器导航到目标路由但不会加载组件

Question

我正在尝试使用模板内的 [routerLink] 导航到同一模块中的不同组件，但不知何故目标组件不会加载，因此我停留在同一组件。

代码：

  `file : site.module.ts 
    import { RouterModule } from '@angular/router';



@NgModule({
  declarations: [
    HomeComponent,
    NavigationComponent,
    FooterComponent,
    LoginComponent
  ],
  imports: [
    CommonModule,
    SiteRoutingModule,
    RouterModule
  ]
})
export class SiteModule { }`

file: site-routing-module.ts

    import { NgModule } from "@angular/core";
import { RouterModule, Routes } from "@angular/router";
import { HomeComponent } from "./pages/home/home.component";
import { LoginComponent } from "./pages/login/login.component";

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

@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
})

export class SiteRoutingModule {

}

file: home.component.html 
    <button class="have-ins-btn"[routerLink]="['/login']" [queryParams]="{ins_exists: false}"

Answer 1

你能试试这样改变路线顺序吗

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