这个问题的解决方案是对于新的视图,使用
组件来渲染,而不是使用以前视图的容器。
在你的Angular应用中,你需要确保你有一个
元素。这个元素将是Angular路由器来渲染它的视图的地方。
你可以将
元素放在你想要渲染视图的地方。例如,如果你有一个名为home
的路由,你可以在你的app.component.html
文件中放置以下内容:
当用户通过路由导航到home
路由时,路由器将渲染与该路由匹配的组件,并将其放置在
元素中。
以下是一个样例,其中定义了一个名为app-routing.module.ts
的路由模块并使用
渲染它:
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'other', component: OtherComponent },
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
在app.component.html
中使用
:
通过这种方式,当用户导航到不同的路由时,新的组件将被渲染并显示在
中。
上一篇:Angular路由获取先前参数
下一篇:Angular路由加载错误组件