asynchronous - 找不到管道 'async'

Question

我正在尝试使用 Angular 2 和 Firebase 构建一个简单的博客，但在组件中使用异步管道时遇到问题。我在控制台中收到错误消息。

zone.js:344Unhandled Promise rejection: Template parse errors:The pipe 'async' could not be found ("

[ERROR ->]{{ (blog.user | async)?.first_name }}

"): BlogComponent@6:3 ; Zone: ; Task: Promise.then ; Value: Error: Template parse errors:(…) Error: Template parse errors:The pipe 'async' could not be found ("

博客.component.ts

import {Component, Input} from "@angular/core";

@Component({
  selector: 'blog-component',
  templateUrl: './blog.component.html',
  styleUrls: ['./blog.component.css'],
})

export class BlogComponent {
  @Input() blog;
}

博客.component.html

<h1 class="article-title">{{ blog.title }}</h1>
<p>{{ (blog.user | async)?.first_name }}</p>

应用程序组件.ts

import { Component } from '@angular/core';
import { BlogService } from "./services/services.module";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  constructor(private blogService: BlogService) {}
  articles = this.blogService.getAllArticles();
}

app.component.html

<article *ngFor="let article of articles | async">
  <blog-component [blog]="article"></blog-component>
</article>

博客.服务.ts

import {Injectable} from "@angular/core";
import {AngularFire} from "angularfire2";
import {Observable} from "rxjs";
import "rxjs/add/operator/map";

@Injectable()
export class BlogService {
  constructor(private af: AngularFire) { }

  getAllArticles(): Observable<any[]> {
    return this.af.database.list('articles', {
      query: {
        orderByKey: true,
        limitToLast: 10
      }
    }).map((articles) => {
      return articles.map((article) => {
        article.user = this.af.database.object(`/users/${article.user_id}`);
        return article;
      });
    });
  }
}

只有当我尝试在 blog.component.html 文件中使用异步时才会出现问题。如果我尝试在 app.component.html 文件中打印用户名，它会起作用。我应该在 blog.module.ts 中注入(inject) AsyncPipe 吗？如何让异步在 blog.component.ts 中工作？

Answer 1

@NgModule.declarations 不会被子模块继承。如果您需要来自模块的管道、指令和组件，则应将该模块导入到您的功能模块中。

具有所有核心管道的模块是 @angular/common 中的 CommonModule

import { CommonModule } from '@angular/common';

@NgModule({
  imports: [ CommonModule ]
})
class BlogModule {}

它在 app.component 中工作的原因是因为您很可能将 BrowserModule 导入到 AppModule 中。 BrowserModule 重新导出 CommonModule，因此通过导入 BrowserModule，就相当于导入了 CommonModule。

同样值得注意的是 CommonModule 也有核心指令，比如 ngFor 和 ngIf。因此，如果您有一个使用这些功能的模块，您还需要将 CommonModule 导入该模块。