Question

我是Angular的新手（今天开始），我很简单地尝试将教程从数据文件扩展到Django REST框架和API调用。我无法弄清楚如何将变量传递给对Django Rest Framework api的http调用。

我指定了我的app模块/路由：

user@Box:~# perl -e 'print "Hack the Planet!\n"'
Hack the Planet!

BarDetailsComponent

import { BarDetailsComponent } from './bar-details/bar-details.component';
const routes: Routes = [
  ...
  { path: 'bar-details/:id', component: BarDetailsComponent },
  ...
]
@NgModule({
  declarations: [
    ...
    BarDetailsComponent,
    ...
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(routes),
    HttpModule
  ],
  providers: [
    ...
    BarDetailsProvider,
    ...
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
}

BarDetailsProvider

import { Component, OnInit } from '@angular/core';
import { Bar } from '../bars/bar';
import { BarDetailsProvider } from './bar-details.provider';

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

  bar: Bar;
  private selectedId : number;

  constructor(private barDetailsProvider: BarDetailsProvider) { }

  ngOnInit() {
    this.barDetailsProvider.getBarDetails().subscribe(bar => this.bar = bar);
  }

}

我上面有import { Injectable } from '@angular/core'; import { Http } from '@angular/http'; import { Observable } from 'rxjs/Observable'; import { Bar } from '../bars/bar'; import 'rxjs/add/operator/map'; import { environment } from '../../environments/environment'; @Injectable() export class BarDetailsProvider { constructor(private http: Http) { } getBarDetails(): Observable<Bar> { return this.http.get(`${environment.baseUrl}/bar/1`).map(response => response.json() as Bar); } } $ {environment.baseUrl} / bar / 1 return this.http.get(我希望将1替换为从以下html传递的id

).map(response => response.json() as Bar);

如何让<h1>Bars</h1> <div *ngFor="let bar of bars"> <a routerLink="/bar-details/{{bar.pk}}"> <h2>Name: {{bar.name}}</h2> </a> <div>Address: {{bar.address}}</div> <hr> </div>我回到id来电？

Answer 1

是的，您需要订阅您的路线参数schanges到您的组件

constructor(private route: ActivatedRoute) {}

ngOnInit() {
     this.sub = this.route.params.subscribe(params => {
          const id = params['id'];

          this.barDetailsProvider.getBarDetails(id).subscribe(bar => this.bar = bar);
     });
}

并相应地更改您的服务

getBarDetails(id: string): Observable<Bar> {
    return this.http.get(`${environment.baseUrl}/bar/${id}`).map(response => response.json() as Bar);

}

Answer 2

1种方式 - 当您在路由端更改id时更新它们（使用subscribe）

<强> BarDetailsComponent

import { ActivatedRoute } from '@angular/router';
....
constructor(private activeRoute: ActivatedRoute ..... {
   this.activeRoute.params.subscribe(element => {
     this.id = element['id']; //you get id
     this.barDetailsProvider.getBarDetails(this.id).subscribe(bar => this.bar = bar);
   })
   ....
}

2路 - 没有订阅的 BarDetailsComponent

this.id = this.activeRoute.params['id']
在getBarDetails（）函数中添加id param

getBarDetails(id): Observable<Bar> { return this.http.get(`${environment.baseUrl}/bar/${id}`).map(response => response.json() as Bar); }

Angular-向http.get调用添加参数

2 个答案: