Angular 为什么同一模块中的组件不使用router.navigate加载？

在有人将此问题标记为重复之前，我尝试了以下问题：

针对这些问题，我尝试了解决方案，但没有任何效果。所以我来这里问我自己的问题。 现在谈问题:

我创建了一个新的应用程序，我正在尝试从应用程序中路由到Home.Component。Component with router.navigate。以下是供参考的文件：

App Component.html

app-routing.module.ts

app.module.ts

我不理解为什么单击“单击主页”按钮时未加载home.component.html

此外，我还尝试创建另一个组件Second.component，并尝试从Home.component上的按钮clickbutton加载该组件

这些组件不是惰性加载的，它们位于同一模块中。 每当我点击按钮时，url就会改变。那么，为什么关联的组件不加载？我是否遗漏了配置的某些部分？

---

当你的应用程序启动时，你看到的应用程序组件在那里，是因为它是引导组件，而不是因为它在激活的路径上。您需要使用o元素来渲染与当前路径匹配的组件

根据您想要实现的目标，为了不复制页面上的元素，您可能需要拆分AppComponent。一个部件应该是引导的，并且只包含路由器出口。另一部分应仅包含按钮

我猜您正在尝试添加一个菜单，该菜单将显示在所有页面上，以及一些您可以导航到的页面。在这种情况下，你可以举个例子 将AppComponent保留为引导组件，并在其中添加和菜单：

<p>App component works</p>
<button (click)="onClick()">Home</button>
<button (click)="goToSomeOtherPage()">Some other page</button>
<router-outlet></router-outlet>

---

随着菜单变得越来越复杂，您可以将其拆分为一个单独的组件，例如使用MainMenuComponent。

您可以为此共享stackblitz吗。@silentsudo我正在更新问题。请在其中找到stackblitz url。那么我是否需要为每个重新定向到任何其他组件的组件添加一个？既然添加路由器出口确实会复制元素，那么如何拆分AppComponent呢？在大多数情况下，整个应用程序中都需要一个路由器出口。它将被放置在一个顶级组件中。其内容将显示与当前路径匹配的任何组件。

import { Router, ActivatedRoute } from '@angular/router';
export class AppComponent {
  constructor(private router:Router){}
  onClick(){
    console.log("Button clicked!!");
    this.router.navigate(['home']);
  }
}

const routes: Routes = [
  { path:'', component: AppComponent, pathMatch:'full'},
  {path:'home', component:HomeComponent},
];

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

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

<p>App component works</p>
<button (click)="onClick()">Home</button>
<button (click)="goToSomeOtherPage()">Some other page</button>
<router-outlet></router-outlet>

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch:'full'},
  { path: 'home', component: HomeComponent },
  { path: 'some/other/page', component: SomeOtherComponent },
];