Angular路由--子路由和附属Outlet

2019独角兽企业重金招聘Python工程师标准>>>

路由使用中最重要的一点就是路径问题，

• / 是相对与基础路径的。routerLink="/home"会到http://localhost:4200/home
• ./ 或 无斜杠 是相对于当前级别的。routerLink="home"会到http://localhost:4200/当前/home
• ../ 会到当前路由路径的上一级。

用Router.navigate方法导航到相对路径时，我们必须提供当前的ActivatedRoute，来让路由器知道我们现在位于路由树中的什么位置。

this.router.navigate(["home"], { relativeTo: this.route });

在链接参数数组中，添加一个带有relativeTo属性的对象，并把它设置为当前的ActivatedRoute。 这样路由器就会基于当前激活路由的位置来计算出目标URL。

当调用路由器的navigateByUrl时，总是要指定完整的绝对路径。

子路由

就是组件间的嵌套关系，一个路由组件中嵌套了另一个路由组件。假设有个home组价和page组件，page路由组件嵌套在home组件中，home路由组件在最外层模板中

    RouterModule.forRoot([
      {
        path: 'home', component: HomeComponent,
        children:[
          {path:'page',component:PageComponent}
        ]}
    ])

//基础路径页面模板
<div routerLink="home">早上好</div>
<router-outlet></router-outlet>

//home组件模板
<div routerLink="page">中午好</div>
<router-outlet></router-outlet>

//page组件模板
<div>下午好</div>

这样一开始在基础路径页面模板中只能看到早上好，当我们点击它就会出现中午好，再点击中午好会出现下午好，这就是子路由的用法。

附属Outlet

一个路由组件中可以同时显示多个组件，其中主要路由(primary outlet)只能有一个，附属路由(auxiliary outlet)可以有任意多个，各个附属路由通过不同的命名加以区分。

附属路由和主路由：

• 它们彼此互不依赖。
• 它们与其它路由组合使用。
• 它们显示在命名出口中。

例如http://localhost:4200/home(popup:page)，这就是同一页面中打开了home路由组件(主路由)和page路由组件(以popup命名的附属路由)。

如果只点开了附属路由就是http://localhost:4200/(popup:page)

    RouterModule.forRoot([
      { path: 'home', component: HomeComponent,},
      { path: 'page', component: PageComponent, outlet: 'popup'}
    ])

<a [routerLink]="['/home']">早上好</a><br/>
<a [routerLink]="[{outlets:{popup:['page']}}]">中午好</a><br/>

<router-outlet></router-outlet>
<router-outlet name="popup"></router-outlet>

附属路由通过Router.navigate清除

  this.router.navigate([{ outlets: { popup: null }}]);

 

转载于:https://my.oschina.net/u/3412211/blog/898112