Angular 路由后不破坏源组件
Angular doesnt destroy source component after routing
我正在构建一个 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 { }
将<router-outlet></router-outlet>
放在app.component.html而不是landing-component.html,然后创建一个新路线 { path: '', component: LandingComponent }
默认加载登陆组件
我正在构建一个 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 { }
将<router-outlet></router-outlet>
放在app.component.html而不是landing-component.html,然后创建一个新路线 { path: '', component: LandingComponent }
默认加载登陆组件