介绍

在Angular中，router-outlet是一个指令，用于在应用程序中管理路由。路由是指在Web应用程序中根据URL路径加载视图的方式。router-outlet指令标识一个组件作为子层次视图的容器。当导航到一个指定的URL时，Angular会查找该URL所需的组件并把其放入<router-outlet>中。

使用

在HTML模板中，<router-outlet>是一个空标记，用于Angular路由器显示匹配当前URL的视图。

<router-outlet></router-outlet>

在路由定义文件中，通过定义路由来与组件关联。以下是一个路由定义文件的示例，其中包括了两个路径（空路径和/about），分别与 HomeComponent 和 AboutComponent 组件相关联。

import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

const appRoutes: Routes = [
    { path: '', component: HomeComponent },
    { path: 'about', component: AboutComponent }
];

然后在应用程序模块中定义这些路由，并将其传递给forRoot()方法，以便正确定义了路由器。在模块中导入RouterModule并调用forRoot()。

import { RouterModule, Routes } from '@angular/router';

const appRoutes: Routes = [
  // Define your routes here
];

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

现在，当用户在浏览器中访问你的网站时，应用程序会尝试找到匹配当前URL的路由，并在<router-outlet>中呈现相关联的组件。

代码片段

<!-- HTML模板中的router-outlet -->
<router-outlet></router-outlet>

<!-- 路由定义文件 -->
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

const appRoutes: Routes = [
    { path: '', component: HomeComponent },
    { path: 'about', component: AboutComponent }
];

<!-- 应用程序模块 -->
import { RouterModule, Routes } from '@angular/router';

const appRoutes: Routes = [
  // Define your routes here
];

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