路由错误 Angular 4

Question

我是 Angular 的新手，在设置我的视图之间的路由时遇到了问题。我经历了不同的答案，但似乎没有什么能解决我的问题。在那门课程中，我可能有 deleted/changed/tweaked（为了解决我的错误而拼命尝试）一些我找不到的东西。请看看我的代码并指出我的错误。这是我在控制台中遇到的错误。任何 help/suggestion 将不胜感激。

这个应用程序基本上显示了世界上所有地区和国家的详细信息Rest Country API

谢谢，

app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';


// Router Module for Application level Route
import { RouterModule, Routes } from '@angular/router';

import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { AfricaComponent } from './africa/africa.component';
import { AmericaComponent } from './america/america.component';
import { AsiaComponent } from './asia/asia.component';
import { EuropeComponent } from './europe/europe.component';
import { OceaniaComponent } from './oceania/oceania.component'
import { CountryViewComponent } from './country-view/country-view.component';
import { FilterComponent } from './filter/filter.component';


// import statement for services
import { AfricaService } from './africa.service';
import { AfricaHttpService } from './africa-http.service';

import { AmericaService } from './america.service';
import { AmericaHttpService } from './america-http.service';

import { AsiaService } from './asia.service';
import { AsiaHttpService } from './asia-http.service';

import { EuropeService } from './europe.service';
import { EuropeHttpService } from './europe-http.service';

import { OceaniaService } from './oceania.service';
import { OceaniaHttpService } from './oceania-http.service';


import { CountryViewService } from './country-view.service';
import { CountryViewHttpService } from './country-view-http.service';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    AfricaComponent,
    AmericaComponent,
    AsiaComponent,
    EuropeComponent,
    OceaniaComponent,
    CountryViewComponent,
    FilterComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot([
      { path: 'home', component: HomeComponent },
      { path: '', redirectTo: 'main', pathMatch: 'full' },
      { path: 'africa', component: AfricaComponent },
      { path: 'america', component: AmericaComponent },
      { path: 'asia', component: AsiaComponent },
      { path: 'europe', component: EuropeComponent },
      { path: 'oceania', component: OceaniaComponent },
      { path: 'country/:name', component: CountryViewComponent }
    ]),
    HttpClientModule
  ],
  providers: [AfricaService, AfricaHttpService, AmericaService, AmericaHttpService,
    AsiaService, AsiaHttpService, EuropeService, EuropeHttpService,
    OceaniaService, OceaniaHttpService, CountryViewService, CountryViewHttpService],
  bootstrap: [AppComponent]
})
export class AppModule { }

africa.component.html

  <!--Home page Html-->
    <div class="container-fluid mainContainer">
      <div class="row mainRow">
        <div class="col mainCol">

          <!--Content Section-->
          <div class="row africanCountryRowHeading">
            <div class="backArrow">
              <a [routerLink]="['/home']">
                <i class="material-icons">
                  keyboard_backspace
                </i>
              </a>
            </div>
            <div class="col-md-12 upperCol">AFRICA</div>
          </div>
          <a routerLink="['/country',country.name]">

          <div class="row africanCountryRowContent" *ngIf="allAfricanCountries.length>0">
              <div *ngFor="let africanCountry of allAfricanCountries" class="col-xs-12 col-md-6 col-lg-6 col-xl-6 africanCountriesMainCol">

                <!--Country Iteration div starts here-->
                <div class="row africanCountriesRow">
                  <div class="col-md-12 africanCountryCol">
                    <div class="panel-flag africanCountriesFlag">
                      <img [src]="africanCountry.flag">
                    </div>
                    <div class="panel panel-default africanCountriesPanel">
                      <div class="panel-heading africanCountriesPanelHeading">Country: {{africanCountry.name}}</div>
                      <div class="panel-body africanCountriesPanelBody">
                        <p>
                          Capital: {{ africanCountry.capital }}
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
                <!--Countries Iteration div ends here-->
              </div>
            </div>
          </a>
        </div>
      </div>
    </div>

国家-view.component.ts

   import { Component, OnInit, OnDestroy } from '@angular/core';


        // importing route related code
        import { ActivatedRoute, Router } from '@angular/router';
        import { CountryViewService } from '../country-view.service';
        import { CountryViewHttpService } from '../country-view-http.service';


        @Component({
          selector: 'app-country-view',
          templateUrl: './country-view.component.html',
          styleUrls: ['./country-view.component.css']
        })
        export class CountryViewComponent implements OnInit, OnDestroy {

          public currentCountry;
          public currentCountryName;

          constructor(private _route: ActivatedRoute, private router: Router,
            private countryViewService: CountryViewService, private countryViewHttpService: CountryViewHttpService) {
            console.log("Country View Constructor called");
          }

          ngOnInit() {

            let currentCountryName = this._route.snapshot.paramMap.get('name');
            console.log(currentCountryName);

            this.countryViewHttpService.getSingleCountryInfo(currentCountryName)
              .subscribe(

                data => {
                  console.log(data);
                  this.currentCountry = data;
                },
                error => {
                  console.log("Some Error Occurred");
                  console.log(error.errorMessage);
                }
              )
          }

          ngOnDestroy() {
            console.log("Country View Component Destroyed");
          }

        }

乡村景观-http.service

import { Injectable } from '@angular/core';

// importing Http Client to make the request
import { HttpClient, HttpErrorResponse } from '@angular/common/http';

// importing observables related code
import { Observable } from 'rxjs';
import { catchError } from 'rxjs/operators';
import { tap } from 'rxjs/operators';
import { delay } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class CountryViewHttpService {

  public currentCountry;
  public baseUrl = 'https://restcountries.eu/rest/v2/name';
  constructor(private _http: HttpClient) {
    console.log("Country Http service was called");
  }

  // Exception Handler
  private handleError(err: HttpErrorResponse) {
    console.log("Handle error Http calls")
    console.log(err.message);
    return Observable.throw(err.message);
  }

  // method to return single country
  public getSingleCountryInfo(currentCountryName): any {
    let myResponse = (this._http.get(this.baseUrl + '/' + currentCountryName + '?fullText=true'));
    console.log(myResponse);
    return myResponse;
  }
}

Answer 1

将 AfricaComponent 中的 routerLink 更改为 ../country 并在其周围添加方括号。

来自 <a routerLink="['/country',country.name]"> 到 <a [routerLink]="['../country', country.name]">

Angular RouterLink API reference

路由错误 Angular 4

Error in Routing Angular 4

angular

routes

url-routing

angular4-router