Angular 2 ngOnInit变量

import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent implements OnInit {
  data: any;

  constructor(private dataService: DataService) {}

  ngOnInit() {
    // 在这里执行初始化逻辑
    this.data = this.dataService.getData();
  }
}

// 在组件中
data$: Observable<any>;

ngOnInit() {
  this.data$ = this.dataService.getData();
}

<!-- 在模板中 -->
<div *ngIf="data$ | async as data">
  <!-- 使用 data -->
</div>

import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

@Component({
  // ...
})
export class ExampleComponent implements OnInit, OnDestroy {
  private unsubscribe$ = new Subject<void>();

  ngOnInit() {
    this.dataService.getData()
      .pipe(takeUntil(this.unsubscribe$))
      .subscribe(data => {
        // 处理数据
      });
  }

  ngOnDestroy() {
    this.unsubscribe$.next();
    this.unsubscribe$.complete();
  }
}