角度6：路由器参数不适用于服务

Question

我是angular的新手，我试图浏览来自API的数据。路由工作正常它转到其各自的组件，但未在地址栏中获取数据。而且在控制台中未显示任何错误。

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { GithubProfileComponent } from './components/section-ten/github-profile/github-profile.component';
import { SectionTenComponent } from './components/section-ten/section-ten.component';
import { NotFoundPageComponent } from './components/not-found-page/not-found-page.component';

const routes: Routes = [  
  {path : 'section-ten/:id', component: GithubProfileComponent},
  {path : 'section-ten', component: SectionTenComponent}, 
  {path : '', component: SectionTenComponent}, // Set Home page 
  {path: '**', component: NotFoundPageComponent } // Not found page
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

export const routingComponents = [
  SectionTenComponent,
  NotFoundPageComponent,
  GithubProfileComponent
]

我从那里获取数据的服务。

hamedani-followers.service.ts

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class HamedaniFollowersService {
  gitHubUrl = 'https://api.github.com/users/mosh-hamedani/followers';

  constructor(private http: HttpClient) { }

  getFollowers(){
    return this.http.get(this.gitHubUrl)
  }

}

这是我的父组件。其中包含那个“ a”标记（点击事件）。

section-ten.component.html

<div class="cont">
  <h3>Routing</h3>
  <ul class="list-group">
    <li class="list-group-item" *ngFor="let hamedaniFollower of hamedaniFollowers | slice:0:5; let i=index">
      <div class="img_cont">
        <img [src]="hamedaniFollower.avatar_url" />
      </div>
      <div class="text_cont">
        <h4>{{hamedaniFollower.login}}</h4>
        <h5><a [routerLink]="['/section-ten', 'hamedaniFollower.id']">{{hamedaniFollower.url}}</a></h5>
      </div>      
    </li>
  </ul>
</div>

父组件文件。

section-ten.component.ts。

import { Component, OnInit } from '@angular/core';
import { HamedaniFollowersService } from './../../services/hamedani-followers.service';

@Component({
  selector: 'section-ten',
  templateUrl: './section-ten.component.html',
  styleUrls: ['./section-ten.component.scss']
})
export class SectionTenComponent implements OnInit {
  hamedaniFollowers : any;

  constructor(private service: HamedaniFollowersService) { }

  ngOnInit(){
    this.service.getFollowers()
    .subscribe( members => this.hamedaniFollowers = members );    
  }

}

我试图从中获取ID的子组件文件。

github-profile.component.ts（子组件）

import { Component, OnInit } from '@angular/core';
import { Routes, ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-github-profile',
  templateUrl: './github-profile.component.html',
  styleUrls: ['./github-profile.component.scss']
})
export class GithubProfileComponent implements OnInit {
  constructor(private Routes: ActivatedRoute) { }

  ngOnInit() {
     this.Routes.paramMap.subscribe(params => {
      let id = +params.get('id');
      console.log(params.get('id'));
     })
  }

} 

Answer 1

您应该在hamedaniFollower.id文件中传递'hamedaniFollower.id'而不是字符串section-ten.component.html。您在定义h5的地方。

Answer 2

此行是错误的：

$(document).on('click', '.add-form-row', function(e){
    e.preventDefault();
    cloneMore('.form-row.deliverables:last', 'deliverables');
    return false;
});

$(document).on('click', '.add-form-row1', function(e){
    e.preventDefault();
    cloneMore1('.form-row.payments:last', 'paymentSchedule');
    return false;
});

必须为：

SUM({@Grade} * ({@lec} + {@lab})) / SUM({@lec} + {@lab})

或者您只是说<h5><a [routerLink]="['/section-ten', 'hamedaniFollower.id']">{{hamedaniFollower.url}}</a></h5> 是普通字符串。