![](/img/trans.png)
[英]How to set route for “home” in Angular 2 app-routing.module.ts
[英]Angular: What's the purpose of paths in app-routing.module.ts
我是 Angular 的新手,我问自己 app-routing.module.ts 中路径的用途(以及此模块的一般用途)是什么时候我的所有路径都在 app.module.ts 中处理?
这是我的 app-routing.module.ts:
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { TaskviewComponent } from './taskview/taskview.component';
const routes: Routes = [];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
这是我的 app.module.ts:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import {RouterModule} from '@angular/router';
import { TaskviewComponent } from './taskview/taskview.component';
import { AppRoutingModule } from './app-routing.module';
import { AddTaskComponent } from './add-task/add-task.component';
import {ReactiveFormsModule} from '@angular/forms';
@NgModule({
declarations: [
AppComponent,
TaskviewComponent,
AddTaskComponent
],
imports: [
RouterModule.forRoot([{
path: 'view', component: TaskviewComponent},
{path: 'add', component: AddTaskComponent
}]),
BrowserModule,
AppRoutingModule,
ReactiveFormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
您使用 app-routing.module.ts 错误(您根本没有使用它)。
app-routing.module.ts 的目的是将您的路由外包到不同的文件中(纯粹是为了便于阅读),然后将模块重新导入您的 app.module.ts 文件中。
正确的使用方法是:
应用程序路由.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { TaskviewComponent } from './taskview/taskview.component';
const routes: Routes = [
{path: 'view', component: TaskviewComponent},
{path: 'add', component: AddTaskComponent}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { TaskviewComponent } from './taskview/taskview.component';
import { AppRoutingModule } from './app-routing.module';
import { AddTaskComponent } from './add-task/add-task.component';
import {ReactiveFormsModule} from '@angular/forms';
@NgModule({
declarations: [
AppComponent,
TaskviewComponent,
AddTaskComponent
],
imports: [
BrowserModule,
AppRoutingModule,
ReactiveFormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
您可以将app-routing.module.ts
中的代码放在app.module.ts
中。 在单独的文件中定义routes
只是一个好习惯。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.