others - angular2路由 - Angular 2CLI向现有项目添加route

69 3

我有一个现有的Angular2应用程序,现在,我想使用路由导航,有没有方法使用Angular2 CLI将路由添加到现有Angular2项目?

假设我有一个组件"test",并且希望在全局范围内实现这个路由。

时间: 原作者:

142 2

我找到了最简单的方法,希望这会有帮助。

首先在src -- > app文件夹中添加app-routing.module.ts文件

app-routing.module.ts文件将如下所示


import { NgModule } from \'@angular/core\';


import { Routes, RouterModule } from \'@angular/router\';


import { HomeComponent } from \'./home/home.component\'; // Add your component here


import { AboutComponent } from \'./about/about.component\'; // Add your component here



//This is my case 


const routes: Routes = [


 {


 path: \'\',


 component: HomeComponent


 },


 {


 path: \'about\',


 component: AboutComponent


 }


];



@NgModule({


 imports: [RouterModule.forRoot(routes)],


 exports: [RouterModule]


})


export class AppRoutingModule { }



然后在app.module.ts文件中导入app-routing.module.ts文件,如下所示。

app.module.ts


import { BrowserModule } from \'@angular/platform-browser\';


import { NgModule } from \'@angular/core\';



import { AppRoutingModule } from \'./app-routing.module\'; // Added here



现在你将能够执行路由任务。

原作者:
90 2

这对于当前的Angular版本不适用!

运行ng init --routing

通过这种方式你会得到app-routing.module.ts 。

添加 import { AppRoutingModule } from \'./app-routing.module\';

imports: [AppRoutingModule]到你的app.module.ts

  • 好处是,如果你开始使用Angular CLI创建路由,你将获得相同的路由,

原作者:
150 2

这对于当前的Angular版本不适用!

这取决于你是否想向现有模块添加路由,可以向你的模块添加下面的代码。


import { Routes, RouterModule } from \'@angular/router\';



const routes: Routes = [];


//in array you should have your routes like 


// { path:"path", component: ComponentName },



在NgModule中,你有imports定义,


RouterModule.forRoot(routes, { useHash: true })



或 child


RouterModule.forChild(routes)



清理项目的例子


import { Routes, RouterModule } from \'@angular/router\';



const routes: Routes = [{ path:"path", component: ComponentName }];


@NgModule({


 imports: [RouterModule.forChild(routes)],


 exports: [RouterModule],


 providers: []


})



原作者:
65 1

在Angular5 6中可以使用这些命令向现有项目添加路由。

  • ng generate module app-routing --flat --module=app

--flat将文件放在src app而不是自己的文件夹中,--module =app告诉CLI在AppModule的imports数组中注册它。

这为你生成文件src/app/app-routing.module.ts

在src/app/app-routing.module.ts内部,你必须导入路由代码:

import { RouterModule ,routes } from\'@angular/router\';

进一步,编辑src/app/app-routing.module.ts以如下所示:

  • 
     import { RouterModule, Routes, Router } from \'@angular/router\';
    
    
     import {class name} from \'address your component Component\';
    
    
     const routes: Routes = [
    
    
     { path: \'/home\' , component : yourComponenetName}
    
    
     ];
    
    
     @NgModule({
    
    
     imports: [
    
    
     RouterModule.forRoot(routes)
    
    
     ],
    
    
     exports: [ RouterModule ]
    
    
     })
    
    
     export class AppRoutingModule { } 
    
    
    
    
  • 接下来,将router-outlet标签添加到app.html文件,告诉路由在哪里显示路由视图,
  • 
     <router-outlet></router-outlet>
    
    
    
    
  • 此外,你还应该在顶部使用这个标记签入index.html文件,
  • 
     <base href="/"> 
    
    
    
    

如果使用我上面提到的CLI命令,它将被直接添加。

原作者:
122 0

请确保遵循以下要点:

1>确保在index.html中添加了<base href="/">


 <html>


 <head>


 <base href="/" />


 <title>Angular Demo</title>



2<router-outlet></router-outlet>


 div style="text-align:center">


 <h1>


 Welcome to MyApp


 </h1>


 <img width="300" alt="Angular Logo" src="data:image/svg+xml;....">


 </div>


 <router-outlet></router-outlet>



  • router outlet告诉路由在哪里显示路由视图。

3


 @NgModule({


 imports: [


 AppRoutingModule


 ],


 declarations: [


 AppComponent,


 ],


 bootstrap: [ AppComponent ]


 })


 export class AppModule { }



原作者:
...