路由的使用:
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
数组。
-
- import{InMemoryWebApiModule}from'angular-in-memory-web-api';
- import{InMemoryDataService}from'./in-memory-data.service';
-
- imports:[
- BrowserModule,
- FormsModule,
- HttpModule,
- InMemoryWebApiModule.forRoot(InMemoryDataService),
- AppRoutingModule
- ],
- angular-in-memory-web-api没有就用npm安装
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};
}
}
当 Angular 创建组件时,会首先为组件所需的服务请求一个注入器 (injector)。
注入器维护了一个服务实例的容器,存放着以前创建的实例。 如果所请求的服务实例不在容器中,注入器就会创建一个服务实例,并且添加到容器中,然后把这个服务返回给 Angular。 当所有请求的服务都被解析完并返回时,Angular 会以这些服务为参数去调用组件的构造函数。 这就是依赖注入 。