Angular 2路由器错误

我创建了Angular 2路由器模块，但它目前没有工作，并且当我想打开链接/城市时出现错误错误：未捕获（承诺中）错误：错误：无法激活已经激活出口错误：无法激活已激活的出口”Angular 2路由器错误

但我可以打开这个链接手动

这里是代码：路由器模块

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

2）的AppModule

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

3）AppComponentHTML

<div class="page-wrapper" [ngClass]="{ 
            'sun-background': weatherDesc == 'Clear', 
            'rain-background': weatherDesc == 'Rain', 
            'clouds-background': weatherDesc == 'Clouds' 
             }"> 
    <div class="container-fluid"> 
    <div class="row"> 
     <div class="col-sm-12"> 
     <header> 
      <div class="header-wrapper"> 
      <h3 class=" text-left">Weather App</h3> 
      <a routerLink="/city" routerLinkActive="active">cities</a> 
      <a routerLink="/weather-list" routerLinkActive="active">weather</a> 
      <app-weather-search></app-weather-search> 
      </div> 
     </header> 
     </div> 
    </div> 
    </div> 
    <!--<app-weather-list (notify)="background($event)"></app-weather-list>--> 
    <!--<app-weather-list></app-weather-list>--> 
    <router-outlet></router-outlet> 

</div>

来源

2017-06-05 rick1

你使用多个布线插座吗？ –

-1

删除在/weather-list领先斜线weather-list。这将使第一条路可能导致问题。试试看，让我知道。

来源

2017-06-05 17:13:26

没有帮助，同样的错误 – rick1

好的....你可以尝试在PLUNK中做一个样本吗？ –

-1

它看起来好像你的routerLink没有在组件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，我不知道，在这种情况下是必要的。

来源

2017-06-05 19:26:17 jLee

尝试

const routes: Routes = [ 

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

    ];

，并在imports声明

来源

2017-06-05 19:43:03

我看到你没有路由器的出口在您的应用程序组件移动appRoutingModule到列表的开始。尝试将此代码复制到您的app.component.html中：

<router-outlet></router-outlet>

然后尝试进入打开链接。

来源

2017-06-06 03:10:22

Angular 2路由器错误

回答

相关问题