NG学习笔记

angular路由

纯属个人学习笔记以便以后查阅。
首先要添加路由模块，通常定义为 AppRoutingModule，通过CLI指令生成：
ng generate module app-routing --flat --module=app
–flat 把这个文件放进了 src/app 中，而不是单独的目录中。
–module=app 告诉 CLI 把它注册到 AppModule 的 imports 数组中。
生成后的代码：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: []
})
export class AppRoutingModule { }

由于通常 不会在路由模块中声明组件，所以可以删除 @NgModule.declarations 并删除对 CommonModule 的引用。
你将会使用 RouterModule 中的 Routes 类来配置路由器，所以还要从 @angular/router 库中导入这两个符号。
添加一个 @NgModule.exports 数组，其中放上 RouterModule 。 导出 RouterModule 让路由器的相关指令可以在 AppModule 中的组件中使用

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

@NgModule({
  exports: [ RouterModule ]
})
export class AppRoutingModule {}

接下来就是要把项目里的路由添加进来，其中有两个必要属性：
路由定义 会告诉路由器，当用户点击某个链接或者在浏览器地址栏中输入某个 URL 时，要显示哪个视图。
典型的 Angular 路由（Route）有两个属性：

1. path：一个用于匹配浏览器地址栏中 URL 的字符串。
2. component：当导航到此路由时，路由器应该创建哪个组件。

RouterModule.forRoot()

你必须首先初始化路由器，并让它开始监听浏览器中的地址变化。
把 RouterModule 添加到 @NgModule.imports 数组中，并用 routes 来配置它。你只要调用 imports 数组中的RouterModule.forRoot() 函数就行了。这个方法之所以叫 forRoot()，是因为你要在应用的顶级配置这个路由器。 forRoot() 方法会提供路由所需的服务提供商和指令，还会基于浏览器的当前 URL 执行首次导航。

import { NgModule } from '@angular/core';
// import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';

import { HeroesComponent } from './heroes/heroes.component';
import { DashboardComponent } from './dashboard/dashboard.component';

const routes: Routes = [
  // 设置默认跳转路由， full表示与path为空的路由完全匹配
  { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
  { path: 'heroes', component: HeroesComponent },
  { path: 'dashboard', component: DashboardComponent }
];

@NgModule({
  imports: [
  //   CommonModule
    RouterModule.forRoot(routes)
  ],
  //declarations: [] //你通常不会在路由模块中声明组件，所以可以删除 @NgModule.declarations,并删除对 CommonModule 的引用。
  exports: [ RouterModule ]
})
export class AppRoutingModule { }

添加路由出口 （RouterOutlet）

打开 AppComponent 的根模板，把 其他组件元素替换为 元素。
能在 AppComponent 中使用 RouterOutlet，是因为 AppModule 导入了 AppRoutingModule，而 AppRoutingModule 中导出了 RouterModule。

路由跳转及传参的几种形式：

1. 通过路由路径传递
   在html标签中用属性 routerLink="/xxx" ,可以设置路由跳转
   AppRoutingModule定义的路由数组中：

   { path: 'xxx/:para', component: ComponentName } //多个参数就添加多个/:para
   

   组建中跳转路由的代码：

   <a routerLink="/xxx/para">
   

   此时uri:http://localhost:3100/product/1

2. 2.通过路由参数
   AppRoutingModule定义的路由数组中：

{ path: 'xxx', component: ComponentName }

在component.ts里通过Router的navigate方法跳转

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

....

constructor(private router: Router) { }

  toDetail(id,name){
    this.router.navigate(['xxx'], {
        queryParams: {
            id: id,
            name: name
        }
    });
  }

或者，在template上，通过添加参数属性queryParams：

<a [routerLink]="['/product']" [queryParams]="{id: 1,name: 'name'}">产品</a>

此时uri: http://localhost:3100/product?id=1&name=name

获得参数的几种形式：

import { ActivatedRoute } from '@angular/router';
...
constructor(
    private route: ActivatedRoute
  ) { }
  ngOnInit() {
//1.路由快照
    const id = this.route.snapshot.paramMap.get('para'); 
// 2.路由订阅
    this.route.params
      .subscribe((params: Params) => {
        this.id = params['para'];
      })
// 3.多个参数的时候
    this.route.queryParams
        .subscribe(queryParams => {
        this.id = queryParams.id;
        this.name = queryParams.name;
    });
  }

路由返回：

import { Location } from '@angular/common';
...
constructor(
    private location: Location
  ) { }

goBack(): void {
    this.location.back();
  }