Angular 中的可观察对象

export declare class EventEmitter<T extends any> extends Subject<T> {
    /**
     * Creates an instance of this class that can
     * deliver events synchronously or asynchronously.
     *
     * @param isAsync When true, deliver events asynchronously.
     *
     */
    constructor(isAsync?: boolean);
    /**
     * 发出包含给定值的事件。
     */
    emit(value?: T): void;
    /**
     *注册此实例发出的事件的处理程序。
     */
    subscribe(generatorOrNext?: any, error?: any, complete?: any): Subscription;
}
复制代码

import { Component, OnInit, Output, EventEmitter } from '@angular/core';
@Component({
  selector: 'app-zippy',
  templateUrl: '
    <div class="zippy">
      <div (click)="toggle()">点击该文本</div>
      <div [hidden]="visible">
        <ng-content></ng-content>
      </div>
    </div>
  '
})
export class ZippyComponent implements OnInit {
  visible = true;
  // tslint:disable-next-line: no-output-native
  @Output() open = new EventEmitter<any>();
  // tslint:disable-next-line: no-output-native
  @Output() close = new EventEmitter<any>();
  constructor() { }
  ngOnInit(): void {
  }
  toggle() {
    this.visible = !this.visible;
    if (this.visible) {
      this.close.emit('关闭');
    } else {
      this.open.emit('打开');
      this.open.subscribe((data) => {
        console.log('open subscribe:' + data);
      });
    }
  }
}
复制代码

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-home4',
  templateUrl: '
    <app-zippy (open)="onOpen($event)" (close)="onClose($event)">我是home组件的内容</app-zippy>
  '
})
export class Home4Component implements OnInit {
  constructor() { }
  ngOnInit(): void {
  }
  onOpen(e) {
    console.log(e);
  }
  onClose(e) {
    console.log(e);
  }
}
复制代码

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
@Component({
  selector: 'app-asyncpipe',
  templateUrl: '
    <div><code>observable|async</code>:
      Time: {{ time | async }}</div>
  '
})
export class AsyncpipeComponent implements OnInit {
  time: Observable<any>;
  constructor() { }
  ngOnInit(): void {
    this.time = new Observable(observer => {
      setInterval(() => {
        observer.next(new Date().toString());
      }, 1000);
    });
  }
}
复制代码

observable|async: Time: Tue Apr 14 2020 09:39:46 GMT+0800 (中国标准时间)
复制代码

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
@Component({
  selector: 'app-asyncpipe',
  templateUrl: '
    <ng-container *ngIf="time2 |async as tim">
      <div>
        {{tim.date}}---{{tim.time}}
      </div>
    </ng-container>
  '
})
export class AsyncpipeComponent implements OnInit {
  time2: Observable<any>;
  constructor() { }
  ngOnInit(): void {
      this.time2 = new Observable(observer => {
      setInterval(() => {
        const dd = new Date();
        observer.next({ date: dd.toString(), time: dd.toTimeString() });
      }, 1000);
    });
  }
}
复制代码

Tue Apr 14 2020 09:49:38 GMT+0800 (中国标准时间)---09:49:38 GMT+0800 (中国标准时间)
复制代码

import { Router, NavigationStart } from '@angular/router';
import { filter } from 'rxjs/operators';
@Component({
  selector: 'app-routable',
  templateUrl: './routable.component.html',
  styleUrls: ['./routable.component.css']
})
export class Routable1Component implements OnInit {
  navStart: Observable<NavigationStart>;
  constructor(private router: Router) {
    // Create a new Observable that publishes only the NavigationStart event
    this.navStart = router.events.pipe(
      filter(evt => evt instanceof NavigationStart)
    ) as Observable<NavigationStart>;
  }
  ngOnInit() {
    this.navStart.subscribe(evt => console.log('Navigation Started!'));
  }
}
复制代码

import { Component, OnInit } from '@angular/core';
import {ActivatedRoute} from '@angular/router';
@Component({
  selector: 'app-product-detail',
  templateUrl: './product-detail.component.html',
  styleUrls: ['./product-detail.component.css']
})
export class ProductDetailComponent implements OnInit {
  constructor(public router: ActivatedRoute) {
  }
  ngOnInit(): void {
    this.router.url.subscribe(url => console.log('The URL changed to: ' + url));
  }
}
复制代码

import {Component, OnInit} from '@angular/core';
import {ActivatedRoute} from '@angular/router';
@Component({
  selector: 'app-news',
  templateUrl: './news.component.html',
  styleUrls: ['./news.component.css']
})
export class NewsComponent implements OnInit {
  nums: any[] = [];
  constructor(public router: ActivatedRoute) {
    this.router.queryParams.subscribe((data) => {
      console.log(data);
    });
  }
  ngOnInit(): void {
  }
}
复制代码

import { FormGroup } from '@angular/forms';
@Component({
  selector: 'my-component',
  template: 'MyComponent Template'
})
export class MyComponent implements OnInit {
  nameChangeLog: string[] = [];
  heroForm: FormGroup;
  ngOnInit() {
    this.logNameChange();
  }
  logNameChange() {
    const nameControl = this.heroForm.get('name');
    nameControl.valueChanges.forEach(
      (value: string) => this.nameChangeLog.push(value)
    );
  }
}