角2ルータエラー

Question

角度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> 

Answer 1

weather-listに/weather-list有数のスラッシュを削除します。これにより、問題を引き起こしている可能性のある最初のパスが動作します。これを試してみてください。

Answer 2

ルータリンクがコンポーネント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を削除してみてください、私はわからないかもしれませんこの場合必要です。

Answer 3

は

const routes: Routes = [ 

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

    ]; 

を試してみて、私はあなたがあなたのアプリケーションコンポーネントにルータ・コンセントを持っていないことを確認imports宣言

Answer 4

で、リストの先頭にappRoutingModuleを移動します。このコードをあなたのapp.component.htmlにコピーしてみてください：

<router-outlet></router-outlet> 

次にリンクを開くようにしてください。