Question

我不想使用“| async pipe”，因为我不想为每个组件获取数据。我的转换函数如下：

 transform(key: string, ...args) {
  this.storage.get("dictionary").then((dict) => {         
   var translated = dict[key] || "noResource";
   console.log("key = "+key + ", value = "+translated);
   return translated; 
  });  
}

我可以获取键和值，但不会呈现值。我试过ngZone但没有工作。

Answer 1

我不明白为什么你不想使用与你的情况相匹配的唯一“buildin”管道。

说你的烟斗是：

 @Pipe({name: 'mypipe'})
    export class MyPipe implements PipeTransform
    {
        transform(key: string, ...args) {
            // watch out you missed the return statement !!
            -->return<-- this.storage.get("dictionary").then((dict) => {         
            var translated = dict[key] || "noResource";
            console.log("key = "+key + ", value = "+translated);
            return translated; 
        });  
    }

您可以在模板中使用

{{ 'mykey' | mypipe | async }}

如果你不想使用异步管道，那么你将被迫模仿那些已经死了简单和错误证明的逻辑。没有收获。

Answer 2

如果您希望管道是异步的并稍后更新，我认为唯一的方法是使用WrappedValue。

例如像这样Promise在1s之后更新管道。在你的用例中，它的工作方式完全相同。

查看现场演示：https://stackblitz.com/edit/angular-knamur?file=src%2Fapp%2Ftest-async.ts

@Pipe({name: 'testAsync', pure: false})
export class TestAsyncPipe implements PipeTransform {

  private val: number;
  private originalValue: number;

  constructor(private _ref: ChangeDetectorRef) {}

  transform(value: number): any {
    if (value === this.originalValue) {
      return this.val;
    } else {
      new Promise(resolve => {
        setTimeout(() => resolve(value * 2), 1000) ;
      }).then((v: number) => {
        this.val = v + 1;
        this._ref.markForCheck();
      });
    }

    this.originalValue = value;
    this.val = value;

    return WrappedValue.wrap(value);
  }
}

然后在模板中使用：

{{ 42 | testAsync }}

1秒后，它会更新模板并显示85。

管道变换的承诺

2 个答案: