angular2学习笔记 2

最新推荐文章于 2019-06-26 10:33:46 发布

FlyingMG

最新推荐文章于 2019-06-26 10:33:46 发布

阅读量414

点赞数

本文链接：https://blog.csdn.net/a452272215/article/details/77187652

版权

路由的使用：

1.确保html <head>下有<basehref="/">

2.在app.module中导入路由模块

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

在NgModule中的imports数列中加入

RouterModule.forRoot([{ path:'heroes', //指定跳转到/heroes的路径后进行‘操作’

component:HeroesComponent //‘操作’为加载HeroesComponent组件该组件应已在顶部被导入

}])

3. 在template中加入锚点<a routerLink="/heroes">

router-outlet

路由模块：

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]
})
exportclassAppRoutingModule{}
- 将路由抽出到一个变量中。如果你将来要导出这个模块，这种 "路由模块" 的模式也会更加明确。
- 添加RouterModule.forRoot(routes)到imports。
- 把RouterModule添加到路由模块的exports中，以便关联模块（比如AppModule）中的组件可以访问路由模块中的声明，比如RouterLink 和 RouterOutlet。
- 无declarations！声明是关联模块的任务。
- 如果有守卫服务，把它们添加到本模块的providers中（本例子中没有守卫服务）。
HTTP:
在appmodule中
我们要能从本应用的任何地方访问这些服务，就要把HttpModule添加到AppModule的imports列表中。这里同时也是我们引导应用及其根组件AppComponent的地方。
导入InMemoryWebApiModule并将其加入到模块的imports数组。
1. import{InMemoryWebApiModule}from'angular-in-memory-web-api';
2. import{InMemoryDataService}from'./in-memory-data.service';
1. imports:[
2. BrowserModule,
3. FormsModule,
4. HttpModule,
5. InMemoryWebApiModule.forRoot(InMemoryDataService),
6. AppRoutingModule
7. ],
angular-in-memory-web-api没有就用npm安装

创建文件放置需要模拟传送的data

import { InMemoryDbService } from 'angular-in-memory-web-api';
export class InMemoryDataService implements InMemoryDbService {
createDb() {
const heroes = [
{ id: 0, name: 'Zero' },
{ id: 11, name: 'Mr. Nice' },
{ id: 12, name: 'Narco' },
{ id: 13, name: 'Bombasto' },
{ id: 14, name: 'Celeritas' },
{ id: 15, name: 'Magneta' },
{ id: 16, name: 'RubberMan' },
{ id: 17, name: 'Dynama' },
{ id: 18, name: 'Dr IQ' },
{ id: 19, name: 'Magma' },
{ id: 20, name: 'Tornado' }
];
return {heroes};
}
}

注入与constructor：

当 Angular 创建组件时，会首先为组件所需的服务请求一个注入器 (injector)。

注入器维护了一个服务实例的容器，存放着以前创建的实例。如果所请求的服务实例不在容器中，注入器就会创建一个服务实例，并且添加到容器中，然后把这个服务返回给 Angular。当所有请求的服务都被解析完并返回时，Angular 会以这些服务为参数去调用组件的构造函数。这就是依赖注入。

创建的服务在需要的组件中创建constructor就可以使用了

FlyingMG

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angular2学习笔记 2

路由的使用：1.确保html 下有href="/">2.在app.module中导入路由模块import{RouterModule}from'@angular/router';在NgModule中的imports数列中加入RouterModule.forRoot([{ path:'heroes', //指定跳转到/heroes的路径后
复制链接

扫一扫