但是像android那样扔一个intent里直接就过去了的方式,确实没有。
回首页:
点击一个列表:
包结构:
总的来说,业务被分开了,结构干净多了。虽然现在还体现不出来,但是写到后来就觉得心花怒放,磨刀不误砍柴工功啊。
作为router,也可以分离的。
目前我的项目里只有2个页面,如果多起来-比如20来个,那么app.module.ts又会变的乱七八糟。
所以要把router也给扔出去。
新建一个文件app-routing.module.ts,然后把footRoot平移过来(带上引用)。
在app-routing.module.ts文件里,也需要ngModul。个人理解ngModul就相当于一个基类指示器,导出class后以便被其他类引用。
import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; import { GundamDetailComponent } from './component/detail/gundam-detail.component'; import { GundamHostComponent } from './component/host/gundam-host.component'; @NgModule({ imports: [ RouterModule.forRoot([ { path: '', component: GundamHostComponent }, { path: 'detail/:id', component: GundamDetailComponent } ]) ], exports: [RouterModule] }) export class AppRoutingModule { }
然后既然已经有了这个类,可以导入到app.module.ts里使用使得整个文件看起来清爽一些。
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; import { AppComponent } from './component/appcomponent/app.component'; import { GundamDetailComponent } from './component/detail/gundam-detail.component'; import { GundamHostComponent } from './component/host/gundam-host.component'; import { AppRoutingModule } from './app-routing.module'; @NgModule({ imports: [ BrowserModule, FormsModule, AppRoutingModule // 调用路由 ], declarations: [ AppComponent, GundamDetailComponent, GundamHostComponent ], bootstrap: [AppComponent], }) export class AppModule {}
当然,官方文档又进行了进一步简化。
既然forRoot是一个Route数组,那么数组也可以单独抽出来,当然进一步抽取也可以放到另一个文件里。
import { NgModule } from '@angular/core'; import { RouterModule, Route } from '@angular/router'; import { GundamDetailComponent } from './component/detail/gundam-detail.component'; import { GundamHostComponent } from './component/host/gundam-host.component'; const routes: Route[] = [ { path: '', component: GundamHostComponent }, { path: 'detail/:gundam', component: GundamDetailComponent } ]; @NgModule({ imports: [ RouterModule.forRoot(routes) ], exports: [RouterModule] }) export class AppRoutingModule { }
内容版权声明:除非注明,否则皆为本站原创文章。