要使用Angular 7和RxJS的可观察对象,首先需要安装Angular CLI和RxJS库。然后,可以按照以下步骤进行操作:
ng new my-app
cd my-app
npm install rxjs
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { Observable } from 'rxjs';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
ng generate component my-component
import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.css']
})
export class MyComponentComponent implements OnInit {
observableData$: Observable;
constructor() { }
ngOnInit() {
this.observableData$ = new Observable(observer => {
let count = 0;
setInterval(() => {
observer.next(count++);
}, 1000);
});
}
}
{{ observableData$ | async }}
现在,当你运行应用程序时,你将看到一个计时器,每秒钟增加一个数字。这是通过使用RxJS的可观察对象实现的。