Angular入门：为http.get请求传递动态参数至Django REST API

刚上手Angular就开始扩展功能，挺棒的！针对你要把固定的/bar/1改成从页面传递的动态ID的需求，我给你分步骤讲清楚怎么实现：

第一步：修改Provider的方法，接收ID参数 #

首先得让你的BarDetailsProvider里的请求方法支持传入ID，而不是写死1。修改后的代码应该是这样：

// 在BarDetailsProvider中
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import { environment } from '../environments/environment';
import { Bar } from './bar.model'; // 假设你有Bar模型

@Injectable()
export class BarDetailsProvider {
  constructor(private http: HttpClient) {}

  // 新增id参数，类型设为number
  getBarDetails(id: number): Observable<Bar> {
    // 用模板字符串把id插入URL
    return this.http.get(`${environment.baseUrl}/bar/${id}`)
      .map(response => response.json() as Bar);
  }
}

第二步：在组件中获取动态ID并调用Provider #

这里分两种常见场景，你可以根据自己的页面路由情况选择：

场景1：通过路由URL传递ID（比如访问/bar/5查看ID为5的Bar详情） #

如果你的详情页是通过路由跳转过来的，URL里包含ID参数，那需要用ActivatedRoute来获取这个ID：

1. 首先在组件中注入ActivatedRoute和你的Provider：

// 在BarDetailsComponent中
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { BarDetailsProvider } from './bar-details.provider';
import { Bar } from './bar.model';

@Component({
  selector: 'app-bar-details',
  templateUrl: './bar-details.component.html'
})
export class BarDetailsComponent implements OnInit {
  bar: Bar;

  constructor(
    private route: ActivatedRoute,
    private barProvider: BarDetailsProvider
  ) {}

  ngOnInit() {
    // 从路由快照中获取id参数，注意转成数字（paramMap返回的是字符串）
    const barId = +this.route.snapshot.paramMap.get('id');
    
    // 调用Provider的方法，传入获取到的id
    this.barProvider.getBarDetails(barId)
      .subscribe(barData => {
        this.bar = barData;
        // 这里可以处理获取到的数据，比如渲染到页面
      });
  }
}

2. 确保你的路由配置里已经定义了带参数的路由：

// 在你的路由模块中
import { Routes, RouterModule } from '@angular/router';
import { BarDetailsComponent } from './bar-details/bar-details.component';

const routes: Routes = [
  // 这里的:id就是动态参数，名字要和组件中get('id')的名字一致
  { path: 'bar/:id', component: BarDetailsComponent }
];

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

场景2：从父组件的HTML中传递ID（比如父组件里点击某个Bar卡片跳转到详情） #

如果是父组件通过HTML属性把ID传给详情组件，那用@Input装饰器：

1. 在详情组件中定义输入属性：

// 在BarDetailsComponent中
import { Component, OnInit, Input } from '@angular/core';
import { BarDetailsProvider } from './bar-details.provider';
import { Bar } from './bar.model';

@Component({
  selector: 'app-bar-details',
  templateUrl: './bar-details.component.html'
})
export class BarDetailsComponent implements OnInit {
  // 定义输入属性，父组件可以通过[barId]传递值
  @Input() barId: number;
  bar: Bar;

  constructor(private barProvider: BarDetailsProvider) {}

  ngOnInit() {
    // 确保barId存在时再调用API
    if (this.barId) {
      this.barProvider.getBarDetails(this.barId)
        .subscribe(barData => {
          this.bar = barData;
        });
    }
  }
}

2. 在父组件的HTML中使用详情组件时传递ID：

<!-- 父组件的HTML，假设selectedBarId是父组件中选中的Bar的ID -->
<app-bar-details [barId]="selectedBarId"></app-bar-details>

额外提示：避免内存泄漏（新手友好版） #

如果不想手动管理订阅的销毁，可以用async管道，这样Angular会帮你自动处理：

在组件中把bar改成Observable类型：

// 在BarDetailsComponent中
bar$: Observable<Bar>;

ngOnInit() {
  const barId = +this.route.snapshot.paramMap.get('id');
  this.bar$ = this.barProvider.getBarDetails(barId);
}

然后在HTML中用async管道订阅：

<div *ngIf="bar$ | async as bar">
  <h2>{{bar.name}}</h2>
  <p>{{bar.description}}</p>
  <!-- 其他详情字段 -->
</div>

这样就不用写subscribe和手动取消订阅啦，对新手来说更省心。

内容的提问来源于stack exchange，提问作者HenryM