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

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 { }

出于某种原因，似乎 root 被正确命中，但 URL /plopp 没有带来任何区别。我在设置中可能会遗漏什么以及如何解决它？

Answer 1

我使用与您相同的方式创建了测试项目，其中包含 2 个演示组件，其中应用程序的结构如下所示：

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

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

这是我的应用程序-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 中的路由器仅响应根元素调用

Router in Angular 2 only responding to root element call

routing

typescript

angular-routing

angular2-routing

angular