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路由器錯誤

回答

相關問題