Question

我正在用角度6构建此应用，该应用使用Rest Country API获取所有国家/地区及其详细信息。我面临的问题是我无法理解如何在父组件中设置routerLink来获取国家/地区的详细信息。任何建议都将适用。谢谢。

更新

我无法理解如何访问该国家/地区的名称以便将其传递到URL。我几乎尝试了所有我能想到的，但似乎没有任何效果。

这是我的文件：

shared.modules.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CountryViewComponent } from './country-view/country-view.component';

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [
    CountryViewComponent
  ],
  exports: [
    CountryViewComponent,
    CommonModule
  ]
})
export class SharedModule { }

子组件

country-view.component.ts

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

// importing route related code
import { ActivatedRoute, Router } from '@angular/router';

//importing Service related code
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 {

  @Input() currentCountryName: String;

  public currentCountry;

  constructor(private _route: ActivatedRoute, private countryViewHttpService: CountryViewHttpService) {
    console.log("Contry View Constructor  Called");
  }

  ngOnInit() {

    // getting the name of the country from the route
    let myCountryName = this._route.snapshot.paramMap.get('currentCountryName');
    console.log(myCountryName);


    this.countryViewHttpService.getSingleCountryInfo(myCountryName).subscribe(

      data => {
        console.log(data);
        this.currentCountry = data;
      },
      error => {
        console.log("some error occured");
        console.log(error.errorMessage);
      }
    )
  }

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

父组件HTML

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']">
        <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>

父组件模块文件

africa.module.ts：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SharedModule } from '../shared/shared.module';
import { CountryViewComponent } from '../shared/country-view/country-view.component';
import { RouterModule, Routes } from '@angular/router';


@NgModule({
  imports: [
    CommonModule,
    SharedModule,
    RouterModule.forChild([
      { path: 'country/:name', component: CountryViewComponent }
    ])
  ],
  declarations: [CountryViewComponent]
})
export class AfricaModule { }

子组件服务文件

country-view-http.service.ts：

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 currentCountries;
  public baseUrl = 'https://restcountries.eu/rest/v2/name';

  constructor(private _http: HttpClient) { 
    console.log("Country View Service 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 Informations
  public getSingleCountryInfo(currentCountryName): any {

    let myResponse = this._http.get(this.baseUrl + '/' + currentCountryName + '?fullText=true');
    console.log(myResponse);
    return myResponse;
  } // end get country info function
}

app.component.html

<div class="container-fluid mainContainer">
  <!--Navigation Secion-->
  <div class="row navigationMainRow">
    <div class="col-12 navigationMainCol">
      <div class="row navigationLogoRow">
        <div class="col-8 navigationLogoCol">
          <a [routerLink]="['/home']">
            <img src="../assets/images/Terra.png" alt="Logo" id="logo">
          </a>
        </div>

        <div class="col-4 navigationMenuCol">
          <div class="row navigationMenuRow">
            <div class="col-6 navigationLanguageCol">
              <p>
                Language
              </p>
            </div>
            <div class="col-6 navigationCurrencyCol">
              <p>
                Currency
              </p>
            </div>
          </div>  
        </div>
      </div>
    </div>
  </div>
</div>  
<router-outlet></router-outlet>

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 { 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';


@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    AfricaComponent,
    AmericaComponent,
    AsiaComponent,
    EuropeComponent,
    OceaniaComponent,
    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 }
    ]),
    HttpClientModule
  ],
  providers: [AfricaService, AfricaHttpService, AmericaService, AmericaHttpService,
    AsiaService, AsiaHttpService, EuropeService, EuropeHttpService,
    OceaniaService, OceaniaHttpService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

假设AfricaComponent是您所指的父组件，请使用路由器链接，如下所示：

<a [routerLink]="['/country', africanCountry]">{{africanCountry}}</a>

*ngFor语法内部。

您已经在AfricaModule中实现了路由。现在，您应该可以在CountryViewComponent内的路由器参数中获取africanCountry的名称：

let selectedCountryName;
this._route.params.subscribe((params) => {
  selectedCountryName = params['name'];
});

顺便说一句，您是否将AfricaModule实现为延迟加载模块？如果否，则调用forRoot方法，而不是forChild上的RouterModule方法。

编辑：您无法访问国家名称，因为您试图访问错误的州参数名称。您已在路线配置中将国家/地区名称定义为name。但是您尝试将其作为currentCountryName键的快照值（不存在）进行访问。另外，使用快照获取状态或查询参数并不是一个好习惯，因为它们可能会异步更改。

看看this StackBlitz Project

这肯定会有所帮助

如何在父组件中为共享组件提供routerLink

1 个答案: