一、创建一个带路由的项目
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
<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
<a [routerLink]="['/home']" > 主页 </a>
<a [routerLink]="['/product']"> 产品</a>
</div>
<router-outlet></router-outlet>
这里的<router-outlet></router-outlet>就是路由组件将要显示的位置
routerLink是在html中 使用路由的关键字。参数是个数组
四、控制器(ts文件)中的路由使用 router.navigate
页面上加上一个button 绑定到控制器中的事件
<div style="text-align:center">
<a [routerLink]="['/home']" > 主页 </a>
<a [routerLink]="['/product']"> 产品</a>
<input type="button" value="产品" (click)="toProductDetails()" >
</div>
<router-outlet></router-outlet>
控制器中添加路由事件
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%
网友评论