【async pipe】【 promise】【Observable】【@Injectable】

private missionAnnounceSource = new Subject<string>();

Subject是一个特殊的Observable,它允许将值多播给多个观察者.

---

<div *ngIf="(user$ | async) as user; else loading">
  <user-profile
    [user]="user.profile">
  </user-profile>
  <user-messages
    [user]="user.messages">
  </user-messages>
</div>

<ng-template #loading>
  Loading stuff...
</ng-template>

From Anuglar v4 above, we are able to using 'as' with async pipe. This allow as using 'new variable' instead of subscribe to observable.

We also able to use 'else' with '*ngIf', else taks a 'template' which will be displayed when the if expression is not matched.

代表流的变量用 $ 符号结尾，是 RxJS 中的一种惯例。

 

---

 一个获取当前小时的的 Observable:

//ts
currentHour = new Observable<number>((observer: Observer<number>) => {
  setInterval(() => observer.next(new Date().getHours()), 1000)
})
<!-- html-->
<div>{{ currentHour | async }}</div>

currentHour$ = new Observable(observer => {
    setInterval(() => observer.next(new Date().getHours()), 1000);
});

上面这样的写法不好，不要 new Observable，因为它除了 next() ，还需 unsubscribe() 和 error() 。要下面这样写：

<!-- ts-->

currentTime$ = interval(1000).pipe(
    map(() => new Date()),
    map(d => ({
      hour: d.getHours(),
      minute: d.getMinutes(),
      date: d.toLocaleDateString()
}))

<!-- html-->

<div
*ngIf="currentTime$ | async as d"
>
<div>{{ d.hour }}:{{ d.minute }}</div>
<div>{{ d.date }}</div>
</div>

我们可以使用管道（pipe），将多个操作符链接起来，并将操作符返回的结果组合成一个。 

Operator 是一个函数，它接收一个 Observable 对象，然后返回一个新的 Observable 对象。

---

关于 as *ngIf async 的结合，输出： 在页面显示 woot ；当匹配异常，在页面显示 loading

<!-- html-->
<div *ngIf="( valueStream | async ) as value; else loading">
	{{ value }}
</div>
<!-- 当 value 内容不显示，显示下面的 loading-->
<ng-template #loading>
loading 
</ng-template>

 as的作用：用变量 value 代替 valueStream

//ts
export class AppComponent {
	public valueStream: Observable<string>;
	// I initialize the app component.
	constructor() {
		this.valueStream = of( "woot !" );
	}
}

---

fromEvent

创建一个Observable，该Observable发出来自给定事件对象的指定类型事件。

创建一个来自于DOM事件，或者Node的EventEmitter事件或其他事件的Observable。

constructor() {
    fromEvent(document, 'click').subscribe(x => {
        console.log('click', x);
});
}
// 发出dom document上的点击事件，每次点击时，都会在控制台发出 MouseEvent。

 

---

ajax pipe 的可订阅对象： Observable | Promise

父组件：

<div *ngIf="monitor$ | async as monitor">
<app-titlebar [monitorMessage$]=[monitor$]></app-titlebar>
</div>

子组件 title-bar：

@Input() monitorMessage$: Observable<Monitor | DummpyData>;

<div *ngIf="monitorMessage$ | async as monitorMessage">
</div>

可以直接在angular模板的asyncPipe中使用Promise或observable对象，而不用通过定义一个类的成员属性来存储返回的结果。

asyncPipe订阅Promise或observable对象，并返回它发出的最新值。当发出新值的时候，异步管道会主动调用变化检测器方法，标识组件需执行变化监测。当组件销毁时，异步管道自动取消订阅，以避免潜在的内存泄露。

---

 

@Component({
  selector: 'my-app',
  template: `
  <button (click)="value=1">select - 1</button>
  <button (click)="value=2">select - 2</button>
  <button (click)="value=3">select - 3</button>
  <h5>You selected : {{value}}</h5>

  <hr>
  <div [ngSwitch]="value">

     <div *ngSwitchCase="1">1. Template - <b>{{value}}</b> </div>
     <div *ngSwitchCase="2">2. Template - <b>{{value}}</b> </div>
     <div *ngSwitchCase="3">3. Template - <b>{{value}}</b> </div>
     <div *ngSwitchDefault>Default Template</div>

  </div>
  `,

})
export class AppComponent {}

---

DI

参考： https://blog.csdn.net/zf2014122891/article/details/85335372

依赖注入 providedIn:'root'的原因：如果不在cart.service.ts里加这句话，就需要在根模块@NgModule()参数的providers中注入providers: [CartService] 。我们现在用 providedIn:'root' 的方式。

why DI？

在访问数据的时候， 你通常要对数据做后处理、添加错误处理器，还可能加一些重试逻辑，以便应对网络抽风的情况。

该组件很快就会因为这些数据方式的细节而变得杂乱不堪。 组件变得难以理解、难以测试，并且这些数据访问逻辑无法被复用，也无法标准化。

这就是为什么最佳实践中要求把数据展现逻辑从数据访问逻辑中拆分出去，也就是说把数据访问逻辑包装进一个单独的服务中， 并且在组件中把数据访问逻辑委托给这个服务。就算是这么简单的应用也要如此。

---

ng-container 拥有不存在功能的能力:

 <ng-container *ngIf='books'>

<ul *ngFor="let book of books">
    <li class="book-item">{{isMock ? "" : book.title }}</li>
    <li class="book-item">{{ book.author }}</li>
    <li class="book-item">{{ book.price }}</li>
 </ul>