在 Angular 5.X 中，有一个特别的标签： <router-outlet> ， 其实，同样的，甚至同名的标签，在 React 中也有。 可见 Angular 与 React 的相似性有多高！
使用 <router-outlet>
在 app.module.ts 路由文件中，有这么一段代码：
imports: [
BrowserModule,
RouterModule.forRoot(
[
{
path: '',
redirectTo:'/home',
pathMatch: 'full'
},
{ path: 'home',
component: HomeComponent
},
{
path: 'about',
component: AboutComponent
},
{
path: 'dashboard',
component: DashboardComponent
}
]
)
],
这段代码，意在配置路由， 根据不同的 URL， 跳转到不同的页面。 注意： 这是单页面应用（SPA），只是局部的内容变化，不需要整个页面跳转。 不会出现加载的进度条。
讲述了路由配置文件，再来看页面：
index.html 是整个APP的页面入口。 代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HelloWorld</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>
关键的一行代码是：
<app-root></app-root>
这里 <app-root> 相当于是局部页面的占位符。 这个区域是动态加载的，运行时，会被 app.component.html 替换掉。具体来说，就是被以下页面替换掉。
app.component.html 文件代码如下：
<div style="text-align:center">
<h1>
{{title}}!!
</h1>
<nav>
<a routerLink="home" routerLinkActive="active">Home</a>
<a routerLink="about">About</a>
<a routerLink="dashboard">Dashboard</a>
</nav>
<router-outlet></router-outlet>
</div>
关键的代码是：
<router-outlet></router-outlet>
可以简单把它理解为： 页面的占位符，动态加载，会被替换掉的。
当点击 home、about、 dashboard 时， 在导航栏的下方，会被对应的 XX.component.html 替换掉。 这就是单页面路由的原理。
深度理解 <router-outlet>
Routers 参数是一个有路由定义组成的一个数组。路由定义分如下两部分：
Path：这个是用来匹配浏览器地址中的URL。
Component：路由对应的组件。
让路由可用
引入 RouterModule，即把 RouterModule 添加到 AppModule 的imports 数组中。
import { RouterModule } from '@angular/router';
如果没有 <router-outlet>， 又会怎样呢？
如果在浏览器的地址栏中添加 /about ，比如： http://localhost:4200/about
路由本应该会匹配地址，并显示 AboutComponent 。然而事实并非如此。我们需要告诉路由要在哪里显示这个AboutComponent组件。为了实现这个，需要在 about.component.html 的最后添加 <router-outlet> 元素，<router-outlet> 是 RouterModule 中的其中一个指令。
当然，在实际应用中，我们不会手动在地址栏中输入/about的， 而是通过 <a> 标签来实现。
<nav>
<a routerLink="home" routerLinkActive="active">Home</a>
<a routerLink="about">About</a>
<a routerLink="dashboard">Dashboard</a>
</nav>
再来看个例子
<nav class="navbar navbar-default">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li class="active">
<a routerLink="create" routerLinkActive="active">
Add coins
</a>
</li>
</ul>
</div>
</nav>
<div class="container">
<router-outlet></router-outlet>
</div>
<router-outlet></router-outlet> 到底是怎么占位的呢？
当点击 Add coins 这个 <a> 标签时，会激活 <router-outlet>
<a routerLink="create" routerLinkActive="active">
Add coins
</a>
这个时候， 以下的 div 区域会被替换：
<div class="container">
<router-outlet></router-outlet>
</div>
这就是说， 如果想在哪个区域显示 create.component.html 这个子网页，只需要添加 <router-outlet> 就可以了。
学习交流群：654979292
网友评论