Angular 2路由器错误

Question

我创建了Angular 2路由器模块，但它现在无法正常工作，当我想打开链接/城市时出现错误＆＃39; ERROR错误：未捕获（承诺）：错误：无法激活一个已经激活的插座 错误：无法激活已激活的插座＆＃39;

但我可以手动打开此链接

以下是代码： 路由器模块

var currentMethod = $route.current.params.name;

2）Appmodule

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

import {WeatherListComponent} from "../weather-list/weather-list.component";
import {AddedCityComponent} from "../added-city/added-city.component";
import {AppComponent} from "../app.component";


const routes: Routes = [
    { path: '', redirectTo: '/weather-list', pathMatch: 'full'},
    { path: 'city', component: AddedCityComponent },
    { path: 'weather-list',  component: WeatherListComponent }

];

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

3）AppComponentHTML

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MdButtonModule, MdCheckboxModule, MdCardModule, MdInputModule} from '@angular/material';

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

import { AppComponent } from './app.component';
import { WeatherListComponent } from './weather-list/weather-list.component';

import { WeatherService } from './service/weather.service';
import { WeatherSearchComponent } from './weather-search/weather-search.component';
import { CloudsComponent } from './clouds/clouds.component';
import { SunComponent } from './sun/sun.component';
import { RainComponent } from './rain/rain.component';
import { AddedCityComponent } from './added-city/added-city.component';

import { AppRoutingModule } from './service/app.routing';


@NgModule({
  declarations: [
    AppComponent,
    WeatherListComponent,
    AddedCityComponent,
    WeatherSearchComponent,
    CloudsComponent,
    SunComponent,
    RainComponent


  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    BrowserAnimationsModule,
    MdButtonModule,
    MdCardModule,
    MdInputModule,
    NgbModule.forRoot(),
    AppRoutingModule


  ],
  providers: [
    WeatherService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

试

   const routes: Routes = [

    { path: 'city', component: AddedCityComponent },
    { path: 'weather-list',  component: WeatherListComponent },
    { path: '', redirectTo: '/weather-list', pathMatch: 'full'}

  ];

并将appRoutingModule移至imports声明

中列表的开头

Answer 2

我发现您的App组件中没有路由器插座。尝试在app.component.html中复制此代码：

<router-outlet></router-outlet>

然后尝试进入以打开链接。

Answer 3

将/weather-list中的主斜杠移至weather-list。这将使第一个路径可能导致问题。试试看，告诉我。

Answer 4

看起来你的routerLinks在组件html中没有正确设置。

尝试更改链接标记...

<a routerLink="/city" routerLinkActive="active">cities</a>
<a routerLink="/weather-list" routerLinkActive="active">weather</a>

要......

<a [routerLink]="['/city']" routerLinkActive="active">
<a [routerLink]="['/weather-list']" routerLinkActive="active">

您也可以尝试删除路由模块导入中的.forRoot，我不确定在这种情况下是否有必要。