时间戳

首页 > 解决方案 > Angular 在路由后不会破坏源组件

angular - Angular 在路由后不会破坏源组件

问题描述

我正在构建一个 Angular 8 应用程序，它有 2 个组件：LandingComponent、BlogDetailComponent，当然还有主要组件 AppComponent

如下所示，从 LandingComponent 到 BlogDetailComponent 有路由。当我单击博客详细信息锚点时，它成功地将页面重定向到 BlogDetailComponent 但问题是定向页面还包含登录页面信息。像这样;

Landing Page

Blog Detail Content

我很困惑，我期待源页面被破坏并创建目标页面。但我想我错了。有什么帮助吗？

应用组件.html

<html>
<app-landing></app-landing>
</html>

登陆-component.html

    ...
<li><a routerLink="blog-detail">Landing Page</a></li>
<router-outlet></router-outlet>
   ...

博客详细组件.html

    ...
   <div>Blog Detail Content</>
   ...

应用程序路由模块.ts

    ...
    const routes: Routes = [
        { path: 'blog-detail', component: BlogDetailComponent }
    ];

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

标签： angularangular-ui-routerangular8

解决方案

放置<router-outlet></router-outlet>在app.component.html中，而不是放在landing-component.html中，并创建一个新的路由{ path: '', component: LandingComponent } 来默认加载登陆组件

推荐阅读