3、angular学习第三天（路由）

一、创建一个带路由的项目

ng new xxx --routing [--skip-install]

可以选择跳过安装。
这里我遇到了npm 安装失败的情况。
尝试了很多种方法。cnpm方式不要使用了。莫名奇妙。各种错误。
yarn 可以用不过这次失败了 安装yarn的指令如下

npm install -g yarn

最终。我是更换了淘宝的镜像才成功的

npm config set registry http://registry.npm.taobao.org/

如果想换回原来的镜像

npm config set registry https://registry.npmjs.org/

二、带有路由的项目

package.json 文件中的
dependencies 键下多了"@angular/router": "^6.1.0"

并且在src/app文件下多了 app-routing.module.ts
新建两个组件

ng g component home
ng g component product

在app-routing.module.ts中的源数据Routes中加上路由

const routes: Routes = [
  {path: '', component: HomeComponent},
  {path: 'home', component: HomeComponent},
  {path: 'product', component: ProductComponent}
];

三、路由插座router-outlet 和 html页面上路由 routerLink

路由配置完成后 修改app.component.html

   主页 
   产品

这里的就是路由组件将要显示的位置
routerLink是在html中 使用路由的关键字。参数是个数组

四、控制器(ts文件)中的路由使用 router.navigate

页面上加上一个button 绑定到控制器中的事件

   主页 
   产品

  

控制器中添加路由事件

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'teat-routing';
  constructor(private  router: Router) {
  }

  toProductDetails() {
    this.router.navigate(['/product']);
  }

}

点击button后 跟页面上html中的a标签的routerLink起到相同的路由作用

五、路由找不到时(404)

当访问一个没有配置的路由路径

http://localhost:4200/xxxx

因为在app-routiong.module.ts中没有配置路由规则。页面的router-outlet将什么都不显示。并且页面的控制台报错:Error: Cannot match any routes. URL Segment: 'xxx'

可以配置通用的404页面来处理
创建一个404页面组件

ng g component code404

修改路由规则

const routes: Routes = [
  {path: '', component: HomeComponent},
  {path: 'home', component: HomeComponent},
  {path: 'product', component: ProductComponent},
  {path: '**', component: Code404Component}
];

这里注意的是。路由的匹配是按照顺序优先匹配的。所以这个通配符的匹配一定放到最后面。当没有路由可以匹配到的时候才使用通配符提供的路由

六、重定向路由

配置如下：

 {path: '', redirectTo: '/home', pathMatch: 'full'},

这样配置完成后 访问localhost：4200 就直接回重定向到/home的这个url

总结下：

今天被npm坑到了。。但是 如果网络环境好的话 。我觉得还是不要换淘宝的镜像。
yarn 看网上的介绍 感觉不错的样子。不过还没有学习，不应该强行使用
关于cnpm。。。就去见鬼吧。。再也不会用了。。让我ng serve卡在了95%