这里写图片描述
路由可是说是Angular4非常重要的一个功能，这篇文章中我们将会继续使用Tour Of Heroes的例子来学习路由的使用方法。

学习目标

具体来说我们将学会：

使用Angular路由进行导航
设定路由参数
使用管道格式化数据
在多个组件之间共享服务
使用管道进行数据修饰

学习时间

大概需要十分钟。

事前准备

在上一篇文章全部都用来拆结构，这篇文章仍然非常俗套，从拆结构开始吧。

拆出heroes.component.ts

上篇文章中我们把HeroDetail拆了出来，这次把Hero的list也拆出来，改名为heroes.component.ts，只需要修改两处

* class的名称 *
* privoders的内容移到app.module.ts中 *

/workspace/HelloAngular/src/app # cat heroes.component.ts
import { Component } from '@angular/core';
import { OnInit    } from '@angular/core';import { Hero } from './hero';
import { HeroService } from './hero.service';@Component({selector: 'my-heroes',templateUrl: './heroes.component.html',styleUrls: ['./heroes.component.css'],providers: []
})
export class HeroesComponent implements OnInit {title = 'Tour of Heroes';selectedHero: Hero;heroes: Hero[];onSelect(hero: Hero): void {this.selectedHero = hero;}ngOnInit(): void{this.heroService.getHeroes().then(heroes => this.heroes = heroes); }constructor(private heroService: HeroService) {}
}
/workspace/HelloAngular/src/app #

另外，将如下两个文件进行重新命名

项番	改名前	改名后
No.1	app.component.html	heroes.component.html
No.2	app.component.css	heroes.component.css

新的app.component.ts

重新做一个没有任何实际内容的app.component.ts，这个壳基本上不再会改了。

/workspace/HelloAngular/src/app # cat app.component.ts
import { Component } from '@angular/core';@Component({selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css']
})export class AppComponent {title = 'Tour of Heroes';
}
/workspace/HelloAngular/src/app #

app.component.css可以先touch一个文件放在那就可以，先不必设定css，而html模板文件则是使用刚刚创建的my-heroes

/workspace/HelloAngular/src/app # cat app.component.ts
import { Component } from '@angular/core';@Component({selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css']
})export class AppComponent {title = 'Tour of Heroes';
}
/workspace/HelloAngular/src/app #

app.module.ts

把东西都放到根模块里面：

/workspace/HelloAngular/src/app # cat app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';import { AppComponent } from './app.component';
import { HeroDetailComponent } from './hero-detail.component'
import { HeroService } from './hero.service';
import { HeroesComponent } from './heroes.component';@NgModule({declarations: [AppComponent,HeroDetailComponent,HeroesComponent],imports: [BrowserModule,FormsModule],providers: [HeroService],bootstrap: [AppComponent]
})
export class AppModule { }
/workspace/HelloAngular/src/app #

结果确认

看到如下丑陋而熟悉的页面，我们知道，准备结束了。最上面那行没有样式的Tour of Heroes是刚刚新添的app.component.ts中的内容，而旧的还没有删除，所以目前显示了两行
这里写图片描述

第一个路由例子

BASE HREF

确认index.html中已经设定了base href

/workspace/HelloAngular/src # cat index.html
<!doctype html>
<html lang="en">
<head><meta charset="utf-8"><title>HelloAngular</title><base href="/"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body><app-root></app-root>
</body>
</html>
/workspace/HelloAngular/src #

路由配置

我们首先在跟模块下进行路由的配置，设定内容如下

RouterModule.forRoot([{path: 'heroes',component: HeroesComponent}
])

RouterModule是Angular/router下的一个模块，也需要import进来，路由定义包含的两项内容path和component的具体含义如下：

项目	说明
Path	用来匹配浏览器中的URL，将会使用heroes进行匹配
Component	URL匹配的组件，比如上例中为刚刚创建的HeroesComponent的列表

Outlet

这样最简单的路由的定义和准备就完成了，然后我们需要定义导航的链接和位置，可以通过routerLink和router-outlet来实现，让我们简单来修改一下app.component.html的内容，将其修改成如下内容：

/workspace/HelloAngular/src/app # cat app.component.html<h1>{{title}}</h1><a routerLink="/heroes">Heroes</a><router-outlet></router-outlet>
/workspace/HelloAngular/src/app #

routerLink将会显示一个链接，而router-outlet则指示位置

结果确认

显示如下页面信息
这里写图片描述
当点击链接或者在URL中输入/heroes进行导航，都能得到一样的页面信息

多个路由

看完第一个路由的例子之后，我们将在这个基础上稍作变化，创建一个仪表盘进行多个视图间的切换。

添加仪表盘

创建一个新的组件，并进行显示，首先生成dashboard.component.ts

/workspace/HelloAngular/src/app # cat dashboard.component.ts
import { Component } from '@angular/core';@Component({selector: 'my-dashboard',templateUrl: './dashboard.component.html',styleUrls: ['./dashboard.component.css']
})export class DashboardComponent {title="My Dashboard";
}
/workspace/HelloAngular/src/app #

仅有一个插值表达式的HTML模板页面以及touch的空css文件

/workspace/HelloAngular/src/app # cat dashboard.component.html
<h3>{{title}}</h3>
/workspace/HelloAngular/src/app # cat dashboard.component.css
/workspace/HelloAngular/src/app #

设定基本的module信息

/workspace/HelloAngular/src/app # cat app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';import { AppComponent } from './app.component';
import { HeroDetailComponent } from './hero-detail.component'
import { HeroService } from './hero.service';
import { HeroesComponent } from './heroes.component';
import { DashboardComponent } from './dashboard.component';@NgModule({declarations: [AppComponent,HeroDetailComponent,HeroesComponent,DashboardComponent],imports: [BrowserModule,FormsModule,RouterModule.forRoot([{path: 'heroes',component: HeroesComponent},{path: 'dashboard',component: DashboardComponent}])],providers: [HeroService],bootstrap: [AppComponent]
})export class AppModule { }
/workspace/HelloAngular/src/app #

结果确认

因为页面目前没有添加占位符之类的，所以直接http://localhost:4200不会有变化，但是使用dashboard进行导航的话，会正常显示插值表达式的内容
这里写图片描述

重定向

目前只是当使用dashboard的时候才会显示dashboard的信息，如果希望缺省会重定向路由到/dashboard则可以使用redirectTo指令，具体添加如下信息：

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

添加上述信息后的app.module.ts:

而此时如果使用http://localhost:4200的URL进行访问，则会产生和刚刚一样的结果，唯一不同的是这次是被自动的重定向到的这个页面
这里写图片描述

多个导航链接

在此基础上，将Dashboard的链接也追加进去，只需要修改该app.component.ts文件：

/workspace/HelloAngular/src/app # cat app.component.html<h1>{{title}}</h1><nav><a routerLink="/dashboard">Dashboard</a><a routerLink="/heroes">Heroes</a></nav><router-outlet></router-outlet>
/workspace/HelloAngular/src/app #

结果确认如下，可以看到已有两个导航链接了：
这里写图片描述

显示Top Heroes

将dashboard的内容稍作调整，显示前四位的Heroes，在dashboard.component.ts中取出前四位，放到heroes中

/workspace/HelloAngular/src/app # cat dashboard.component.ts
import { Component } from '@angular/core';
import { OnInit } from '@angular/core';import { Hero } from './hero';
import { HeroService } from './hero.service';@Component({selector: 'my-dashboard',templateUrl: './dashboard.component.html',styleUrls: ['./dashboard.component.css']
})export class DashboardComponent implements OnInit {title = "Top Heroes";heroes: Hero[] = [];constructor(private heroService: HeroService) { }ngOnInit(): void {this.heroService.getHeroes().then(heroes => this.heroes = heroes.slice(0, 4));}
}
/workspace/HelloAngular/src/app #

在HTML模板页面中，使用ngFor将数据进行显示

/workspace/HelloAngular/src/app # cat dashboard.component.html
<h3>{{title}}</h3>
<div class="grid grid-pad"><div *ngFor="let hero of heroes" class="col-1-4"><div class="module hero"><h4>{{hero.name}}</h4></div></div>
</div>
/workspace/HelloAngular/src/app #

这样我们就得到了这样的一个页面信息
这里写图片描述
修改css，使其变得好看一些

/workspace/HelloAngular/src/app # cat dashboard.component.css
[class*='col-'] {float: left;padding-right: 20px;padding-bottom: 20px;
}
[class*='col-']:last-of-type {padding-right: 0;
}
a {text-decoration: none;
}
*, *:after, *:before {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;
}
h3 {text-align: center; margin-bottom: 0;
}
h4 {position: relative;
}
.grid {margin: 0;
}
.col-1-4 {width: 25%;
}
.module {padding: 20px;text-align: center;color: #eee;max-height: 120px;min-width: 120px;background-color: #607D8B;border-radius: 2px;
}
.module:hover {background-color: #EEE;cursor: pointer;color: #607d8b;
}
.grid-pad {padding: 10px 0;
}
.grid-pad > [class*='col-']:last-of-type {padding-right: 20px;
}
@media (max-width: 600px) {.module {font-size: 10px;max-height: 75px; }
}
@media (max-width: 1024px) {.grid {margin: 0;}.module {min-width: 60px;}
}
/workspace/HelloAngular/src/app #

经过css修饰的页面，现在变成了这样，所以你可以看出每个组件的装饰器为什么都要设定这三个东西了。
这里写图片描述
顺便修改一下app.component.css的页面布局

h1 {font-size: 1.2em;color: #999;margin-bottom: 0;
}
h2 {font-size: 2em;margin-top: 0;padding-top: 0;
}
nav a {padding: 5px 10px;text-decoration: none;margin-top: 10px;display: inline-block;background-color: #eee;border-radius: 4px;
}
nav a:visited, a:link {color: #607D8B;
}
nav a:hover {color: #039be5;background-color: #CFD8DC;
}
nav a.active {color: #039be5;
}

这样现在页面变成这样了：
这里写图片描述

配置路由参数

现在所显示的4个Top Heroes，我们希望点击每个Hero的时候会直接使用HeroDetailComponent进行显示。还记得在英雄列表里面的单机实现的方式么？我们实际使用的绑定的方式，通过绑定组件中的hero属性，从而进行数据的传递。

/workspace/HelloAngular/src/app # cat heroes.component.html<h1>{{title}}</h1><h2>My Heroes</h2><ul class="heroes"><li *ngFor="let hero of heroes"  [class.selected]="hero === selectedHero" (click)="onSelect(hero)"><span class="badge">{{hero.id}}</span> {{hero.name}}</li> </ul><hero-detail [hero]="selectedHero"></hero-detail>
/workspace/HelloAngular/src/app #

但是在路由这里却碰到了一点问题，一般来说我们不会希望在URL里面嵌入一个对象的，一般来说在这里可以传递一个Hero的id倒是经常的做法，于是这引出了一个问题，路由的时候如何进行参数的传递，具体格式如下

{path: 'detail/:id',component: HeroDetailComponent
},

detail/:id中的冒号 (:) 表示:id是一个占位符，当导航到组件HeroDetailComponent时，它将被填入一个特定的id。

事前准备

在做这个之前，我们先做两件事情来热一下身，首先在给Hero组件添加一个按Id取对象的函数：

/workspace/HelloAngular/src/app # cat hero.service.ts
import { Injectable } from '@angular/core';import { Hero } from './hero';
import { HEROES } from './mock-heroes';@Injectable()
export class HeroService {getHeroes(): Promise<Hero[]> {return Promise.resolve(HEROES);}getHero(id: number): Promise<Hero> {return this.getHeroes().then(heroes => heroes.find(hero => hero.id === id));}
}
/workspace/HelloAngular/src/app #

然后稍微休整一下hero-detail.component.ts文件

/workspace/HelloAngular/src/app # cat hero-detail.component.ts
import { Component, Input } from '@angular/core';
import { OnInit } from '@angular/core';
import { ActivatedRoute, ParamMap } from '@angular/router';
import 'rxjs/add/operator/switchMap';import { Hero } from './hero';
import { HeroService } from './hero.service';
@Component({selector: 'hero-detail',template: `<div *ngIf="hero"><h2>{{hero.name}} details!</h2><div><label>id: </label>{{hero.id}}</div><div><label>name: </label><input [(ngModel)]="hero.name" placeholder="name"/></div></div>`
})
export class HeroDetailComponent implements OnInit {@Input() hero: Hero;constructor(private heroService: HeroService,private route: ActivatedRoute) {}ngOnInit(): void {this.route.paramMap.switchMap((params: ParamMap) => this.heroService.getHero(+params.get('id'))).subscribe(hero => this.hero = hero);}
}
/workspace/HelloAngular/src/app #

其实做了这样几件事情：

添加了构造函数
添加了LifeHook的OnInit
通过ActivatedRoute使用id来取得相关的数据

整体修改完毕之后，页面没有发生变化
这里写图片描述

设定路由参数

修改dashboard.component.html,从

<div *ngFor="let hero of heroes"  class="col-1-4">

修改为

<div *ngFor="let hero of heroes" [routerLink]="['/detail', hero.id]" class="col-1-4">

这样则就将参数传递过去了，再点击每个Hero的时候，就会直接链接到详细信息

这里写图片描述

Location

点击每个Hero会到详细信息页面，我们可以利用@angular/common的Location进行回退，当然在实际的项目中往往要结合CanDeactivate进行使用，这里我们就简单看一下其back函数的动作。
我们在hero-detail.component.ts中添加一个goBack函数，利用注入的location服务进行回退，然后再加一个回退的按钮与之关联，具体代码如下：

/workspace/HelloAngular/src/app # cat hero-detail.component.ts
import { Component, Input } from '@angular/core';
import { OnInit } from '@angular/core';
import { ActivatedRoute, ParamMap } from '@angular/router';
import { Location } from '@angular/common';import 'rxjs/add/operator/switchMap';import { Hero } from './hero';
import { HeroService } from './hero.service';
@Component({selector: 'hero-detail',template: `<div *ngIf="hero"><h2>{{hero.name}} details!</h2><div><label>id: </label>{{hero.id}}</div><div><label>name: </label><input [(ngModel)]="hero.name" placeholder="name"/></div><button (click)="goBack()">Back</button></div>`
})
export class HeroDetailComponent implements OnInit {@Input() hero: Hero;constructor(private heroService: HeroService,private route: ActivatedRoute,private location: Location) {}ngOnInit(): void {this.route.paramMap.switchMap((params: ParamMap) => this.heroService.getHero(+params.get('id'))).subscribe(hero => this.hero = hero);}goBack(): void {this.location.back();}
}
/workspace/HelloAngular/src/app #

可以看出增加了一个back的按钮，点击则会回退到刚才的页面。
这里写图片描述

路由模块

我们通过在app.module.ts中设定路由信息来达到整体路由设定的目的，可以想象，稍微复杂一点之后app.module.ts将会充满了路由设定信息，在实际的项目开发中更多的是将路由模块进行独立，我们将其抽出形成一个独立的路由模块，依据惯例其应该包含routing一词，并对其相应的组件。我们创建一个app-routing.module.ts文件：

/workspace/HelloAngular/src/app # cat app-routing.module.ts
import { NgModule }             from '@angular/core';
import { RouterModule, Routes } from '@angular/router';import { DashboardComponent }   from './dashboard.component';
import { HeroesComponent }      from './heroes.component';
import { HeroDetailComponent }  from './hero-detail.component';const routes: Routes = [{ path: '', redirectTo: '/dashboard', pathMatch: 'full' },{ path: 'dashboard',  component: DashboardComponent },{ path: 'detail/:id', component: HeroDetailComponent },{ path: 'heroes',     component: HeroesComponent }
];@NgModule({imports: [ RouterModule.forRoot(routes) ],exports: [ RouterModule ]
})
export class AppRoutingModule {}
/workspace/HelloAngular/src/app #

这样，app.module.ts就会得到很大的简化：

/workspace/HelloAngular/src/app # cat app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';import { AppComponent } from './app.component';
import { HeroDetailComponent } from './hero-detail.component'
import { HeroService } from './hero.service';
import { HeroesComponent } from './heroes.component';
import { DashboardComponent } from './dashboard.component';
import { AppRoutingModule } from './app-routing.module';@NgModule({declarations: [AppComponent,HeroDetailComponent,HeroesComponent,DashboardComponent],imports: [BrowserModule,FormsModule,AppRoutingModule],providers: [HeroService],bootstrap: [AppComponent]
})export class AppModule { }
/workspace/HelloAngular/src/app #

确认之后，发现页面仍然跟修改之前一样正常动作。

管道

我们在shell中使用find . -name ‘*.ts’ |xargs grep -i routing就可以使用管道很方便的操作，在Angular中也可以直接使用管道做很多事情，修改前的heroes.component.html是这样的：

/workspace/HelloAngular/src/app # cat heroes.component.html<h1>{{title}}</h1><h2>My Heroes</h2><ul class="heroes"><li *ngFor="let hero of heroes"  [class.selected]="hero === selectedHero" (click)="onSelect(hero)"><span class="badge">{{hero.id}}</span> {{hero.name}}</li> </ul><hero-detail [hero]="selectedHero"></hero-detail>
/workspace/HelloAngular/src/app #

我们把它修改成如下内容：

/workspace/HelloAngular/src/app # cat heroes.component.html<h1>{{title}}</h1><h2>My Heroes</h2><ul class="heroes"><li *ngFor="let hero of heroes"  [class.selected]="hero === selectedHero" (click)="onSelect(hero)"><span class="badge">{{hero.id}}</span> {{hero.name}}</li> </ul><div *ngIf="selectedHero"><h2>{{selectedHero.name | uppercase}} is my hero</h2><button (click)="gotoDetail()">View Details</button></div>
/workspace/HelloAngular/src/app #

这样的话需要点击一下View Detail按钮才能看到信息，同时Hero的名字也会被大写，为了实现这些，当然还需要再heroes组件中田间对应的gotoDetail方法。

/workspace/HelloAngular/src/app # cat heroes.component.ts
import { Component } from '@angular/core';
import { OnInit    } from '@angular/core';
import { Router    } from '@angular/router';import { Hero } from './hero';
import { HeroService } from './hero.service';@Component({selector: 'my-heroes',templateUrl: './heroes.component.html',styleUrls: ['./heroes.component.css'],providers: []
})
export class HeroesComponent implements OnInit {title = 'Tour of Heroes';selectedHero: Hero;heroes: Hero[];onSelect(hero: Hero): void {this.selectedHero = hero;}ngOnInit(): void{this.heroService.getHeroes().then(heroes => this.heroes = heroes); }constructor(private router: Router,private heroService: HeroService) {}gotoDetail(): void {this.router.navigate(['/detail', this.selectedHero.id]);}
}
/workspace/HelloAngular/src/app #

这里写图片描述
可以看到管道和View Details按钮都能按照预期进行动作了。

总结

通过这篇文章，我们大体了解了Angular中的路由是如何使用的，接下来将会进一步学习如何对服务器端的WebAPI发起调用。

查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！

angular4强制刷新视图
使用angular的过程中有时会出现数据已经更新了，但是对于的视图没有更新，针对这一情况，可以是用angular提供的方法强制更新视图。这里使用NGZone来更新视图 import {NgZone} from angular/core;constructor(private zone: NgZone) {this.zone…...
2024/4/20 0:46:09
Angular4创建树形结构
在TypeScript开发环境下，ts文件的变量赋值： list[{id:1,name:cschildren:[{id:2,name:cs2children:[]},{id:2,name:cs3children:[]}] }]; mycontex{children:list$implicit:hello template } html文件添加Angular的标签： <ul *ngIfcont…...
2024/5/4 0:45:09
Angular 4 文本框自动获取焦点
import { Component, OnInit, ViewChild, ElementRef, Renderer } from angular/core;<input type"text" class"confirmBox" [(ngModel)]"confirmLocation" placeholder"Scan Material" autofocus/>autofocus。。。今天又遇到ta…...
2024/4/20 20:32:01
Angular4项目解决跨域问题
跨域跨域:浏览器对于javascript的同源策略的限制,例如a.cn下面的js不能调用b.cn中的js,对象或数据(因为a.cn和b.cn是不同域),所以跨域就出现了.上面提到的,同域的概念又是什么呢??? 简单的解释就是相同域名,端口相同,协议相同同源策略:请求的url地址,必须与浏览器上的url地址…...
2024/5/4 1:02:00
Angular4记账webApp练手项目之一（利用angular-cli构建Angular4.X项目）
Angular4记账webApp练手项目之一（利用angular-cli构建Angular4.X项目） Angular4记账webApp练手项目之二（在angular4项目中使用Angular WeUI） Angular4记账webApp练手项目之三（在angular4项目中使用路由router&#x…...
2024/4/21 16:26:42
Angular 4 打包并发布
项目基于Angular CLI，一个命令行界面工具搭建在项目开发完成之后，在打包发布地方遇到了问题，之前一直使用angularjs开发，至于新的Angular 4却是还未接触，这次的项目，选择了Angular 4，随之而来的…...
2024/4/20 20:31:59
angular4 定时刷新
timer;//定时器this.timer setInterval(() > { //此处为需要定时执行的方法，2000为间隔的时间，单位是毫秒 },2000); 实现OnDestroy接口，在页面离开时，就会调用此方法来销毁该定时器 ngOnDestroy() {if (this.timer) {clearIn…...
2024/4/20 1:55:57
Angular4引用外部插件
首先介绍Angular4重要的目录结构： 在angular-cli,json 文件中styles引入公用的css样式，scripts引入插件或node_modules中插件，路径为绝对路径。引用后建立.ts文件，在.ts文件中声明要使用的插件 ， 声明方法&#xff…...
2024/4/20 16:00:27
angular4触发window的滚动事件
一,条件:需要引入 import { ActivatedRoute } from angular/router; import { DOCUMENT } from angular/platform-browser;二,注册变量 subscribeScoll: any;三, ngOnInit(): void {this.subscribeScoll Observable.fromEvent(window, scroll).debounceTime(10) .subs…...
2024/4/21 2:03:45
Angular2学习——初探
Angular2是Google公司推出的一个跨平台全终端的框架，目前在开发web和移动APP领域由着非比寻常的优势，这和它本身的架构设计脱不开干系的。这里给出Angular框架的七大核心概念，也是我们后面开发必须要搞清楚的内容。下面我们从配置环境开始搭…...
2024/4/21 2:03:44
angular中使用angular2-qrcode生产二维码
官方地址 https://github.com/SuperiorJT/angular2-qrcode...
2024/4/21 2:03:42
Angular2+ 表单主动触发验证
Angular2 表单主动触发验证场景比如用户点击保存按钮后要直接触发验证，显示所有不合法的item. 我这边用的是angular的响应式表单。 html部分 <form [formGroup]"validateForm" ><input type"text" nz-input formControlName"…...
2024/4/21 2:03:41
angular2 超时设置
import ‘rxjs/add/operator/timeout’; this.http.post(‘myUrl’, MyData, {headers: Myheaders}) .timeout(3000, new Error(‘timeout exceeded’)) .map(res > res.json()) .subscribe( data > this.ret data, error > console.debug(‘ERROR’, error),…...
2024/4/21 2:03:41
Angular2+ 属性绑定
前言当要把视图元素的属性 (property) 设置为模板表达式时，就要写模板的属性 (property) 绑定。 Angular的属性绑定是单向数据绑定，因为值的流动是单向的，从组件的数据属性流动到目标元素的属性。对于属性绑定,强调以下几点: 不可以使…...
2024/4/21 2:03:39
angular2 http post请求
import { Http } from ‘angular/http’; import { Headers, RequestOptions, URLSearchParams } from ‘angular/http’; 首先要import 这几个模块， 分别是http请求体，http请求头部，请求options，和请求发送的data，…...
2024/5/2 4:08:46
【angular】angular2环境配置及安装详解
什么是框架？众所周知，就是一种实现的结构，从程序员的角度看，前端框架是一种特殊的、已经实现了的web应用，我们只需要对他进行具体的业务逻辑的填充即可，由框架根据具体的业务逻辑来调用代码的执行。angular…...
2024/5/1 2:53:55
Angular2 指令—通用指令
Angular将通用指令包含在CommonModule模块中，当需要使用这些通用指令时，需要在模块中导入。 BrowserModule模块已经包含了CommonModule模块，所以当引入BrowserModule时，就可以使用了。 NgClass 利用NgClass指令，可以…...
2024/4/30 6:08:44
Angular2 单选框用法
html中单选框用法如下，checked用来选中默认的单选项： <input type"radio" name"sex" value"male" checked>Male <input type"radio" name"sex" value"female">Female如果使用…...
2024/4/21 2:03:35
angular2--input框验证手机号，只能输入数字并且不能超过11位数
第一种： html maxlength为限制输入框输入的最长长度，因为我这里对input做了一些空格加入，所以变成13，要是你们不做分隔，写11就行 <input type"text" id"name" maxlength"13" place…...
2024/4/21 2:03:34
Angular2 select用法-设置默认值和事件
设置默认值： 现在有三个学生小明，小红，小黑，对双向绑定的student设置你想要的select值就可以在下拉框默认选中 code1： 设置”请选择”为默认项，只需要把变量student设置为‘’，即可默认到“请…...
2024/4/25 14:23:42

Angular 4入门教程系列：7：Tour Of Heroes之路由

学习目标

学习时间

事前准备

拆出heroes.component.ts

新的app.component.ts

app.module.ts

结果确认

第一个路由例子

BASE HREF

路由配置

Outlet

结果确认

多个路由

添加仪表盘

结果确认

重定向

多个导航链接

显示Top Heroes

配置路由参数

事前准备

设定路由参数

Location

路由模块

管道

总结

相关文章

最新文章