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

末蓝、 2024-04-19 15:22 1阅读 0赞

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)
    })
    
    <div>{
       { currentHour | async }}</div>

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

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

currentTime$ = interval(1000).pipe(
        map(() => new Date()),
        map(d => ({
          hour: d.getHours(),
          minute: d.getMinutes(),
          date: d.toLocaleDateString()
    }))
    
    
    
    <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**

<div *ngIf="( valueStream | async ) as value; else loading">
    	{
       { value }}
    </div>
    
    <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

父组件：

子组件 title-bar：

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

可以直接在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 {}

--------------------

参考： [https://blog.csdn.net/zf2014122891/article/details/85335372][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>

[https_blog.csdn.net_zf2014122891_article_details_85335372]: https://blog.csdn.net/zf2014122891/article/details/85335372