在不同事件类型Angular 2上订阅http observable

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-my-component',
  template: `
    <div>{{ data }}</div>
  `,
})
export class MyComponent implements OnInit {
  data: any;

  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.http.get('api/data').subscribe((response) => {
      this.data = response;
    });
  }
}

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

@Component({
  selector: 'app-my-component',
  template: `
    <button (click)="getData()">Get Data</button>
    <div>{{ data }}</div>
  `,
})
export class MyComponent {
  data: any;

  constructor(private http: HttpClient) {}

  getData() {
    this.http.get('api/data').subscribe((response) => {
      this.data = response;
    });
  }
}

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-my-component',
  template: `
    <div>{{ data }}</div>
  `,
})
export class MyComponent {
  data: any;

  constructor(
    private http: HttpClient,
    private route: ActivatedRoute
  ) {}

  ngOnInit() {
    this.route.params.subscribe((params) => {
      const id = params['id'];
      this.http.get(`api/data/${id}`).subscribe((response) => {
        this.data = response;
      });
    });
  }
}