angular4路由

最新推荐文章于 2020-12-28 20:09:49 发布

alisaGreen

最新推荐文章于 2020-12-28 20:09:49 发布

阅读量1k

点赞数

本文链接：https://blog.csdn.net/bluefish_flying/article/details/78041844

版权

1 目录结构

2 app.module.ts

 
  import { 
  BrowserModule } 
  from 
  '@angular/platform-browser'; 
 
 
  import { 
  BrowserAnimationsModule } 
  from 
  '@angular/platform-browser/animations'; 
 
 
  import { 
  NgZorroAntdModule } 
  from 
  'ng-zorro-antd'; 
  //这两个是直接使用NG-ZORRO要使用的插件 
 
 
  import { 
  NgModule } 
  from 
  '@angular/core'; 
 
 
  import { 
  AppComponent } 
  from 
  './app.component'; 
 
 
  import { 
  CommserviceService} 
  from 
  "./commservice.service"; 
 
 
  import { 
  FormsModule } 
  from 
  '@angular/forms'; 
 
 
  import { 
  HttpModule } 
  from 
  '@angular/http'; 
 
 
  import { 
  RouterModule, 
  Routes } 
  from 
  '@angular/router'; 
 
 
  import { 
  LoginComponent } 
  from 
  './login/login.component'; 
 
 
  import { 
  SettingModule } 
  from 
  "./setting/setting.module"; 
 

 
  const 
   routes: 
  Routes = [ 
 
  { 
  path: 
   
  '' 
  , 
  redirectTo: 
   
  'setting' 
  , 
  pathMatch: 
   
  'full' 
  }, 
  //这里网上的路径都是要加/但是这里加了/后面module也加/只能跳当前路径不能跳到下一级路径 
 
   { 
  path: 
   'setting', 
  loadChildren: 
   './setting/setting.module#SettingModule'}, 
 
   { 
  path: 
   'login', 
  component:LoginComponent} 
 
   ]; 
 
   @ 
  NgModule({ 
 
  declarations: [ 
 
  AppComponent, 
 
  LoginComponent 
 
   ], 
 
  imports: [ 
 
  BrowserModule, 
 
  FormsModule, 
 
  HttpModule, 
 
  SettingModule, // 
  这里注意一定要将这个module注入到app.module当中 
 
  // HttpClientModule, 
 
  // Ng2PaginationModule, 
 
  BrowserAnimationsModule, 
 
  NgZorroAntdModule. 
  forRoot(), 
 
  RouterModule. 
  forRoot( 
  routes) 
 
   ], 
 
  providers:[ 
  CommserviceService], 
 
  bootstrap: [ 
  AppComponent] 
 
   }) 
 
  export 
   class 
  AppModule { }

3 setting.module.ts

 
  import { 
   NgModule } 
  from 
   '@angular/core'; 
 
 
  import { 
   BrowserAnimationsModule } 
  from 
   '@angular/platform-browser/animations'; 
 
 
  import { 
   CommonModule } 
  from 
   '@angular/common'; 
 
 
  import { 
   SoftproductComponent } 
  from 
   './softproduct/softproduct.component'; 
 
 
  import { 
   OthersComponent } 
  from 
   './others/others.component'; 
 
 
  import { 
   SettingComponent } 
  from 
   "./setting.component"; 
 
 
  import { 
   RouterModule, 
  Routes } 
   from 
  '@angular/router'; 
 
 
  import 
   {  
  NgZorroAntdModule 
   } 
  from 
    
  "ng-zorro-antd" 
  ; // 
  这个应该是有用到这个组件才在module中引入 
 
 
  import { 
   FormsModule } 
  from 
   '@angular/forms'; 
 
 
  const 
   routes: 
  Routes = [ 
 

   { 
  path: 
  'setting', 
  component:SettingComponent, 
 
 
  children:[ 
 

   { 
  path: 
   '', 
  redirectTo: 
  'soft', 
  pathMatch: 
  'full'}, 
 

   { 
  path: 
   'soft', 
  component:SoftproductComponent}, 
 

   { 
  path: 
   'other', 
  component:OthersComponent} 
 

   ]} 
 

   ]; 
  //上面第一个path不用加/不然只能调到当前目录不能跳到下一级，上面的module也一样 
 

   @ 
  NgModule({ 
 
 
  imports: [ 
 
 
  FormsModule, 
 
 
  CommonModule, 
 
 
  RouterModule. 
  forChild( 
  routes), 
 
 
  BrowserAnimationsModule, 
 
 
  NgZorroAntdModule. 
  forRoot() 
 

   ], 
 
 
  declarations: [SettingComponent,SoftproductComponent,OthersComponent]// 
  这里也一定要引入主目录组件SettingComponent 
 

   }) 
 
 
  export 
   class 
  SettingModule { } 
 