显示相同 app.component.html 的角度路由

Question

我目前使用的是 Angular 13 版。

正如官方文档所说，路由应该通过在app-routing.module.ts中创建一个组件并像这样路由它来完成

const routes: Routes = [
{ path: 'first-component', component: 
FirstComponent },
{ path: 'second-component', component: 
SecondComponent },
];

但这样做会呈现我的 app.comoponent.html 文件，而不会实际更改任何内容。我可以看到网址发生了变化，但仅此而已。 其他较新的来源考虑做类似的事情

{
path:'mainpage',
loadChildren: () => import('./mainpage/mainpage.module').then(m 
=> m.MainpageModule)
}

并且，正如上面的解决方案，对我不起作用。我还添加了 <router-outlet></router-outlet> 指令（实际上已经添加了），但没有任何改变。目前正在发生什么？谢谢！

Answer 1

RouterOutlet 充当 Angular 根据当前路由器状态动态填充的占位符，因此在大多数情况下，您的 app.component.html 中可能会有 <router-outlet></router-outlet> 指令。这个元素实际上通知 Angular 用所选路由的组件更新应用程序视图。

routes 数组中的每条路由都是一个 JavaScript 对象，它包含两个属性。第一个属性是定义路由的 URL 路径的路径。第二个是定义 Angular 应该用于相应路径的组件的组件。

loadChildren 是一个不同的问题。默认情况下，Angular NgModules 会立即加载，这意味着一旦应用程序加载，所有 NgModules 也会加载，即使它们不是立即需要的。如果您希望对 Angular 模块使用延迟加载，您可以在 AppRoutingModule 路由中使用 loadChildren（而不是第一个示例中的组件）。