angular4学习笔记二路由

写在前面

路由是 Angular 应用程序的核心，它加载与所请求路由相关联的组件，以及获取特定路由的相关数据。这允许我们通过控制不同的路由，获取不同的数据，从而渲染不同的页面。本次学习主要列出有关于路由的琐碎的知识点，供自己以后查找同时也方便大家共同学习，共同进步。如有错误，请多批评指正！

1、创建路由

新建路由，官方网站上推荐创建路由模块，但是你要知道除了AppModule之外，其它模块也一定需要路由，这样我们每创建一个模块就会带一个路由模块，也就是一个功能模块中会同时包含一个路由模块，这样做很不人性化。所以我们可以新建一个路由类在每个模块之中。
这里写图片描述

2、引入RouterModule

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

RouterModule 对象为我们提供了两个静态的方法：forRoot() 和 forChild() 来配置路由信息。

RouterModule.forRoot()

RouterModule.forRoot() 方法用于在主模块中定义主要的路由信息，通过调用该方法使得我们的主模块可以访问路由模块中定义的所有指令。

RouterModule.forChild()

RouterModule.forChild() 与 Router.forRoot() 方法类似，但它只能应用在特性模块中。
这里写图片描述

3、配置路由

配置代码如下：

export const homeRoutes=[
  {
    path:'',
    component:HomeComponent,
    children:[{
      path:'',
      loadChildren:'../posts/posts.module#PostsModule'
    }]
  }
];

children

父组件HomeComponent的模板中添加router-outlet标签作为占位符，用于children组件的显示。children中为子组件的路径和要加载的子组件。

loadChildren

在异步加载其他模块的时候用到，这是子模块中的子路由开始起作用。请注意loadchildren的格式为“路径#模块名”。

routerLink

它是路由中的一个指令，为了让我们链接到已设置的路由，我们需要使用 routerLink 指令。

routerLinkActive

在实际开发中，我们需要让用户知道哪个路由处于激活状态，通常情况下我们通过向激活的链接添加一个 class 来实现该功能。为了解决上述问题，Angular 路由模块为我们提供了 routerLinkActive 指令，该指令的使用示例如下：

<nav>
  <a routerLink="/settings" routerLinkActive="active">Home</a>
  <a routerLink="/settings/password" routerLinkActive="active">Change password</a>
  <a routerLink="/settings/profile" routerLinkActive="active">Profile Settings</a>
</nav>

们也可以将 routerLink 的属性值，改成数组形式，以便我们传递特定的路由信息

如果我们想要链接到动态的路由地址，且该地址有一个 username 的路由变量，则我们可以按照以下方式配置 routerLink 对应的属性值：

<a [routerLink]="['/profile', username]">
  Go to {{ username }}'s profile.
</a>

通过使用 routerLinkActive 指令，当 a 元素对应的路由处于激活状态时，active 类将会自动添加到 a 元素上。

4、获取路由参数（参数快照和参数订阅）

路由分为：静态路由和动态路由，如果path中有例如：“/：page”这样的路由参数，即为动态路由。其他为静态路由

要访问动态路由的相关信息，我们需要先从 @angular/router 模块中导入 ActivatedRoute ，然后在组件类的构造函数中注入该对象，最后通过订阅该对象的 params 属性，来获取路由参数，具体示例如下：

import { ActivatedRoute, Router, Params } from '@angular/router';

  constructor(
    private activeRoute:ActivatedRoute
  ) { }

<!-- 参数订阅：可以同一个页面（constructor方法被调用，ngonInit()被调用）可以多次获取订阅  -->

 ngOnInit() {
    this.activeRoute.params.subscribe(
      param=>{
        this.currentPage=param.page;
        this.loadData(this.searchText);
      }
 }

<!-- 参数快照：可以同一个页面（constructor方法被调用，ngonInit()被调用）只能获取一次  -->

let routerState: RouterState = this.router.routerState;
let routerStateSnapshot: RouterStateSnapshot = routerState.snapshot;
        if(routerStateSnapshot.url.indexOf("/login")!=-1){
            this.router.navigateByUrl("/home");
        }

下面为参数参数快照和参数订阅的详细博客参考：
https://blog.csdn.net/yyzzhc999/article/details/79043549?foxhandler=RssReadRenderProcessHandler

路由传递参数的多种方法：
https://www.cnblogs.com/chzlh/p/7718064.html

5、路由重定向

代码如下：

import { Router } from '@angular/router';

 constructor(
  private router：Router 
 ) { }

this.router.navigate(['/settings']);

6、跳转时传递参数

代码如下：

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-root',
  template: `
    <div class="app">
      <h3>Users</h3>
      <div *ngFor="let user of users">
        <user-component 
          [user]="user"
          (select)="handleSelect($event)">
        </user-component>
      </div>
      <router-outlet></router-outlet>
    </div>
  `
})
export class AppComponent implements OnInit {
  users: Username[] = [
    { name: 'toddmotto', id: 0 },
    { name: 'travisbarker', id: 1 },
    { name: 'tomdelonge', id: 2 }
  ];

  constructor(private router: Router) {}

  handleSelect(event) {
    this.router.navigate(['/profile', event.name]);
  }
}

7、navigate（）与navigateByUrl（）

Angular Router API 为我们提供了 navigate() 和 navigateByUrl() 方法来实现页面导航。那为什么会有两个不同的方法呢？

使用 router.navigateByUrl() 方法与直接改变地址栏上的 URL 地址一样，我们使用了一个新的 URL 地址。然而 router.navigate() 方法基于一系列输入参数，产生一个新的 URL 地址。

8、路由守卫

路由守卫我看到一个总结的非常详细的博客，详细如下：
https://blog.csdn.net/zekeTao/article/details/79714780

Angular 路由的功能非常强大，既可以使用指令方式也可以使用命令式 API，希望本文可以帮助你尽快入门，若要进一步了解路由详细信息，请访问官方文档。