时间戳

首页 > 解决方案 > 角度路由未显示组件内容

angular - 角度路由未显示组件内容

问题描述

我在这里创建了我的项目示例：stackblitz

我在我的 Angular 应用程序中实现了路由。作为其中的一部分，我编写了上面的Stackblitz。

在该示例中，有两个组件可用：

  1. 应用组件
  2. 登录组件

默认情况下，LoginComponent只要我们提供 URL，它就应该转到 ，因为/home它应该呈现AppComponent.

应用程序路由.module.ts

const appRoutes:Routes=[
  { path: '', component: LoginComponent },
  { path: 'home', component: AppComponent },
  { path: '**', redirectTo: '/not-found', pathMatch: 'full' }  
]

App.component.html

<div class="container">
  <h2> Hello App component</h2>
</div>
<router-outlet></router-outlet>

但问题是默认情况下它在同一页面中显示appcomponent和内容。LoginComponet

任何人都可以帮忙吗？

谢谢

标签： angularangular-routing

解决方案

好的，根据我们的评论，我遇到了问题。如果在除. <router-outlet></router-outlet>_ <app-root></app-root>_login.component.htmlcomponent.htmlapp.component.html

<router-outlet></router-outlet>在你的设计中，你必须在整个应用程序中只有一个。在app.component.html你必须只是有<router-outlet></router-outlet>，没有别的。如果您有一些其他内容要app.component.html提取它们并放入具有新路由的新组件中。应该没问题。

推荐阅读