Angular 路由后不破坏源组件

Question

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

如下所示，存在从 LandingComponent 到 BlogDetailComponent 的路由。当我单击 Blog Detail 锚点时，它成功地将页面重定向到 BlogDetailComponent 但问题是定向页面还包含着陆页信息。像这样；

Landing Page

Blog Detail Content

我很困惑，我希望销毁源页面并创建目标页面。但我想我错了。有帮助吗？

应用-component.html

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

登陆-component.html

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

博客-详细信息-component.html

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

应用程序路由-module.ts

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

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

Answer 1

将<router-outlet></router-outlet>放在app.component.html而不是landing-component.html，然后创建一个新路线 { path: '', component: LandingComponent } 默认加载登陆组件

Angular 路由后不破坏源组件

Angular doesnt destroy source component after routing

angular

angular-ui-router

angular8