异步管道到 src 图像属性 - Angular 2+答案

【问题标题】：async pipe into src image attribute - Angular 2+异步管道到 src 图像属性 - Angular 2+
【发布时间】：2019-03-07 18:10:01
【问题描述】：

我对可观察和异步管道有疑问。我在我的组件中输入了 Observable。在控制器中并在 ngOnInit 中订阅 observable 时，我会得到有效值。问题出在模板中，我没有在模板上获得有效值。我想在图像 src 属性中使用异步。

TvShowComponent（返回 Observable）

    public getCoverLink(): Observable<string> {
      return this.tvShowForm.get('cover').valueChanges.pipe(map((coverLink:  string) => {
        return coverLink;
      }));
  }

TvShowComponent 模板（使用嵌套组件）

<fp-cover-thumbnail [coverLink$]="getCoverLink()"></fp-cover-thumbnail>

CoverThumbnailComponent（带有 Input()） @Input() public coverLink$: Observable;

ngOnInit() {
    this.coverLink$.subscribe(data => {
        console.log(data); // works here
    });
}

CoverThumbnailComponent 模板（但不适用于此处：( )

<div class="cover-thumbnail-container">
<img #cover [src]="(coverLink$ | async)"> <!-- here not work -->
coverLink: {{ (coverLink$ | async) }} <!-- also here not work -->
</div>

【问题讨论】：

在每次更改检测时，都会调用 getCoverLink()，它会创建并返回一个新的 Observable。所以你不断地将不同的 observable 一次又一次地传递给你的组件。要么一劳永逸地创建可观察对象，然后传递它，要么不传递可观察对象，直接传递封面输入的值。

标签： angular image asynchronous pipe observable

【解决方案1】：

问题是这一行：

<fp-cover-thumbnail [coverLink$]="getCoverLink()"></fp-cover-thumbnail>

您正在传递一个返回 Observable<string> 的方法，这在 Angular 中不起作用。

您需要创建一个Observable<string> 并将其分配给它。例如。

coverLink$: Observable<string>;

然后在ngOnInit 或任何你想调用该方法的地方。

this.coverLink$ = this.getCoverLink();

然后你的 html 变成 <fp-cover-thumbnail [coverLink$]="coverLink$"></fp-cover-thumbnail>

或者，您不需要将Observable 传递给您的子组件，您只需执行<fp-cover-thumbnail [coverLink]="coverLink$ | async"></fp-cover-thumbnail>，您的子组件上的Input() 现在可以只是一个字符串。

【讨论】：

或者甚至不使用可观察对象并直接传递tvShowForm.get('cover').value（或更简单的等价物）
是的，这更有意义，因为他的组件似乎只需要链接。