Question

我按如下方式设置了路由。

import { Routes } from "@angular/router";
import { Demo11 } from "demo/demo11";
import { Demo12 } from "demo/demo12";

export const Routing: Routes = [
  { path: "", component: Demo11 },
  { path: "plopp", component: Demo12 }
];

我的主模块看起来像这样。

@NgModule({
  bootstrap: [AppComponent],
  declarations: [AppComponent, NavBar, Demo11, Demo12],
  imports: [BrowserModule, RouterModule.forRoot(Routing)],
  providers: [{ provide: APP_BASE_HREF, useValue: "/" }]
})
export class AppModule { }

出于某种原因，似乎根被正确击中但URL / plopp 没有带来任何差别。我可以在设置中遗漏什么以及如何对其进行故障排除？

Answer 1

我使用2个演示组件创建了测试项目，其中app的结构如下所示：

├───e2e
└───src
    ├───app
    │   ├───first-component
    │   └───second-component
    ├───assets
    └───environments

然后我创建了 app-routing.module ，我在其中配置了应用的所有路由，然后将其导入 app.module 。

这就是我的app-routing.module的样子：

import { NgModule } from '@angular/core';
import { Routes, RouterModule, Route } from '@angular/router';
import { FirstComponent } from './first-component/first.component';
import { SecondComponent } from './second-component/second.component';

const routes: Routes = [
    { path: '', component: FirstComponent },
    { path: 'demo', component: SecondComponent }
]

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule],
})
export class AppRoutingModule { }

FirstComponent和SecondComponent是我创建的演示组件。

这就是我的 app.module 的样子：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { Routes } from '@angular/router';
import { APP_BASE_HREF } from '@angular/common';

import { AppComponent } from './app.component';
import { FirstComponent } from './first-component/first.component';
import { SecondComponent } from './second-component/second.component';
import { AppRoutingModule } from './app-routing.module';

@NgModule({
  declarations: [
    AppComponent,
    FirstComponent,
    SecondComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    AppRoutingModule
  ],
  providers: [{provide: APP_BASE_HREF, useValue: '/'}],
  bootstrap: [AppComponent]
})
export class AppModule { }

Angular 2中的路由器仅响应根元素调用

1 个答案: