Как предоставить routerLink в родительском компоненте для общих компонентов

Question

Я создаю это приложение в Angular 6, который использует API Rest Country, чтобы получить все страны и их детали. Проблема, с которой я сталкиваюсь, заключается в том, что я не могу понять, как установить 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 { }

Дочерний компонент

страны-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 { }

Файл службы дочерних компонентов

страна-вид-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, Теперь вы должны быть в состоянии получить название africanCountry из параметров маршрутизатора, как это внутри вашего CountryViewComponent:

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

Кстати, вы реализуете AfricaModule как модуль Lazy Loaded? Если нет, то позвоните forRoot метод вместо forChild метод на RouterModule,

РЕДАКТИРОВАТЬ: Вы не можете получить доступ к названию страны, потому что вы пытаетесь получить неправильное имя параметра штата. Вы определили название страны как name в конфиге ваших маршрутов. Но вы пытаетесь получить к нему доступ в качестве значения снимка currentCountryName ключ, который не существует. Также использование моментального снимка для получения параметров состояния или запроса не очень хорошая практика, поскольку они могут изменяться асинхронно.

Посмотрите на этот проект StackBlitz

Это должно определенно помочь