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

我正在angular 6中构建此应用程序，用于获取所有国家及其详细信息。 我面临的问题是，我无法理解如何在父组件中设置routerLink以获取国家/地区的详细信息。 任何建议都将被采纳。 谢谢

更新

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

这是我的档案：

共享模块

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>

子组件服务文件

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

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

---

这肯定会有帮助

谢谢你的帮助，但它不起作用。我在promise:error:无法匹配任何路由中未捕获错误。URL片段：“国家/阿尔及利亚”当我点击阿尔及利亚。非洲国家视图您是否将RouterModule.forChild更改为RouterModule.forRoot？是的，我进行了更改。您能否共享路由器出口所在模板的代码？我想这是因为：name部分应该被定义为国家路径的children部分中的children路径。我不确定这是否是您想要的，因为我仍处于学习阶段，但我已经更新了我的问题。请看一看。

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
}

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

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 { }

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