Angular 路由角度4时出错

我不熟悉角度，在设置视图之间的路线时面临问题。我给出了不同的答案，但似乎没有什么能解决我的问题。在这个过程中，我可能会删除/更改/调整（绝望地试图解决我的错误）一些我找不到的东西。 请看一下我的代码并指出我的错误。 这就是我在控制台中遇到的错误。 如有任何帮助/建议，将不胜感激

这个应用程序基本上显示了世界上所有的地区和国家，以及它们的详细信息

谢谢,

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>

国家视图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;
  }
}

---

将

Africa组件中的
routerLink
更改为
。/country
，并在其周围添加方括号

从
你检查过你的角度版本了吗？是的，这是6.1.2节，用于指出
routerLink
中缺少的[]。但它不起作用。控制台在Africa Component中的
处抛出另一个错误
无法读取未定义的
属性'name'。谢谢您指出我的错误。我通过将
更改为
解决了这个问题。我在提供正确的变量名时犯了一个错误。虽然为什么在
国家/地区之前添加“./”？我的意思是，我试着移除它，但我的视图仍然加载。
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;
  }
}