Question

我是新手。我有一个代码示例，但是创建者没有向我解释“ $”的含义，有人可以告诉我blog$和onDestroy$的含义吗？还是那只是他的名字？谢谢！

blog-details.component.ts

import { Component, OnInit, OnDestroy } from '@angular/core';
import { BlogService } from '../../services/blog.service';
import { Observable, Subject } from 'rxjs';
import { BlogItem } from '../../models/blog-item.model';
import { ActivatedRoute } from '@angular/router';
import { takeUntil } from 'rxjs/operators';

@Component({
  selector: 'app-blog-detail',
  templateUrl: './blog-detail.component.html',
  styleUrls: ['./blog-detail.component.scss']
})
export class BlogDetailComponent implements OnInit, OnDestroy {
  blog$: Observable<BlogItem>;
  private onDestroy$: Subject<boolean> = new Subject<boolean>();

  constructor(private readonly blogService: BlogService, private readonly route: ActivatedRoute) { }

  ngOnInit(): void {
    this.route.params.pipe(takeUntil(this.onDestroy$)).subscribe((params: any) => {
      const { id } = params;
      this.blog$ = this.blogService.getBlogDetail(id);
    });
  }

  ngOnDestroy(): void {
    this.onDestroy$.next(true);
    this.onDestroy$.complete();
  }
}

blog-detail.component.html

<p>blog-detail works!</p>
<div class="blog-detail" *ngIf="blog$ | async as blogDetail; else loading;">
    <div class="blog-detail-title">{{ blogDetail?.title }}</div>
    <div class="blog-detail-content">
      Content:
      <span>{{ blogDetail?.body }}</span>
    </div>
    <div>userId: {{ blogDetail?.userId }}</div>
</div>
<ng-template #loading>
  Loading...
</ng-template>

Answer 1

$是可观察对象和主题的命名约定。这是一种标记变量为“流”而不是普通对象的方法。这表明您可以使用变量订阅，传递和使用rxjs运算符。在Angular中，它可以帮助您记住可以在html中使用异步管道。

可观察属性中的“ $”是什么意思？

1 个答案: