Comment améliorer les performances des applications Angular utilisant des pipes ?

如何利用管道提高Angular Performances des applications ? Cet article utilise des exemples de code pour présenter en détail comment utiliser les pipelines pour améliorer les performances des applications应用程序的性能？本篇文章通过代码示例来给大家详细介绍一下利用管道提高Angular应用程序性能的方法。

@Component({
  selector: 'my-app',
  template: `
    <p *ngFor="let user of users">
      {{ user.name }}有一只猫 {{ getCat(user.id).name }}
    </p>
  `,
  styleUrls: [&#39;./app.component.css&#39;]
})
export class AppComponent {
  users = [{ id: 1, name: &#39;wang&#39; }, { id: 2, name: &#39;li&#39; }];
  cats = [{ name: &#39;Tom&#39;, userId: 1 }, { name: &#39;Jerry&#39;, userId: 2 }];

  getCat(userId: number) {
    console.log(&#39;User&#39;, userId);
    return this.cats.find(c => c.userId === userId);
  }
}

Copier après la connexion

有两组数据分别是 e7users10 与 bcats75，可以把 .jpg"/>

users

理解为传入数据，或者是其他数据源。通过

getCat()

方法获取对应的 猫咪，这种场景再业务开发中再熟悉不过。 最后添加全局模板直接进行一个循环输出。【相关教程推荐：《angular教程》】接下来看下输出

User 1
User 2
User 1
User 2
User 1
User 2
User 1
User 2

可以 getCat() 方法调用了 8 次，有 6

次无用调用。这是因为当在模板内使用方法时，

angular

每次变更检测都会调用其方法。我们可以添加一个监听事件

@HostListener('click')
clicked() { }

每当点击事件触发，就会调用 4 次

User 1
User 2
User 1
User 2

这不是我想要，我只想让它调用两次啊！！！数据量大了这么玩顶不住。Pure Pipe

< p>接下来就是主角登场了。我们先创建一个 < /p>pipe

@Pipe({
  name: 'cat',
})
export class CatPipe implements PipeTransform {
  constructor(private appComponent: AppComponent) {}

  transform(value, property: 'name' | 'userId'): unknown {
    console.log('User', value);
    const cat = this.appComponent.cats.find(c => c.userId === value);
    if (cat) {
      return cat[property];
    }
  }
}

可以看到 pipe

的实现与之前调用的方法基本是一样的，在模板中添加引用之后，却发现结果符合之前的预期了，只调用了两次。

这是因为

---

pipe

默认是 pure pipe

，且

Pipe 装饰器有 pure

可用来设置管道模式。

@Pipe({
  name: 'cat',
  pure: true
})

%E8%80%8C%20pure%20%E8%A1%A8%E7%A4%BA%E7%9A%84%E6%98%AF:%20transform%20%E7%9A%84%E5%80%BC(%E5%85%A5%E5%8F%82value)%E5%8F%91%E7%94%9F%E5%8F%98%E5%8C%96%E6%97%B6%E6%98%AF%E5%90%A6%20%E4%B8%8D%E8%B7%9F%E9%9A%8F%E5%8F%98%E6%9B%B4%E6%A3%80%E6%B5%8B%E8%B0%83%E7%94%A8%E3%80%82%E5%AE%98%E6%96%B9%E8%A7%A3%E9%87%8A%EF%BC%9A%E5%A6%82%E6%9E%9C%E8%AF%A5%E7%AE%A1%E9%81%93%E5%85%B7%E6%9C%89%E5%86%85%E9%83%A8%E7%8A%B6%E6%80%81%EF%BC%88%E4%B9%9F%E5%B0%B1%E6%98%AF%E8%AF%B4%EF%BC%8C%E5%85%B6%E7%BB%93%E6%9E%9C%E4%BC%9A%E4%BE%9D%E8%B5%96%E5%86%85%E9%83%A8%E7%8A%B6%E6%80%81%EF%BC%8C%E8%80%8C%E4%B8%8D%E4%BB%85%E4%BB%85%E4%BE%9D%E8%B5%96%E5%8F%82%E6%95%B0%EF%BC%89%EF%BC%8C%E5%B0%B1%E8%A6%81%E6%8A%8A%20pure%20%E8%AE%BE%E7%BD%AE%E4%B8%BA%20false%E3%80%82%20%E8%BF%99%E7%A7%8D%E6%83%85%E5%86%B5%E4%B8%8B%EF%BC%8C%E8%AF%A5%E7%AE%A1%E9%81%93%E4%BC%9A%E5%9C%A8%E6%AF%8F%E4%B8%AA%E5%8F%98%E6%9B%B4%E6%A3%80%E6%B5%8B%E5%91%A8%E6%9C%9F%E4%B8%AD%E9%83%BD%E8%A2%AB%E8%B0%83%E7%94%A8%E4%B8%80%E6%AC%A1%20%E2%80%94%E2%80%94%20%E5%8D%B3%E4%BD%BF%E5%85%B6%E5%8F%82%E6%95%B0%E6%B2%A1%E6%9C%89%E5%8F%91%E7%94%9F%E4%BB%BB%E4%BD%95%E5%8F%98%E5%8C%96%E3%80%82%0AWhen%20true,%20the%20pipe%20is%20pure,%20meaning%20that%20the%20transform()%20method%20is%20invoked%20only%20when%20its%20input%20arguments%20change.%20Pipes%20are%20pure%20by%20default.

%E5%BD%93%E6%8A%8A%20<%20p>pure%20%E6%94%B9%E6%88%90%20false%EF%BC%8C%E4%BC%9A%E9%9A%8F%E5%8F%98%E6%9B%B4%E6%A3%80%E6%B5%8B%E8%B0%83%E7%94%A8%E5%A4%9A%E6%AC%A1%EF%BC%8C%E4%B8%8D%E7%AE%A1%E5%80%BC%E5%8F%91%E7%94%9F%E5%8F%98%E5%8C%96%E6%B2%A1%E3%80%82%E4%BA%86%E8%A7%A3%E5%8F%98%E6%9B%B4%E6%A3%80%E6%B5%8B%E6%9C%BA%E5%88%B6%EF%BC%9A%C2%A0%20%5B%E8%AF%91%5D%E6%B7%B1%E5%85%A5%E7%90%86%E8%A7%A3Angular%20onPush%E5%8F%98%E6%9B%B4%E6%A3%80%E6%B5%8B%E7%AD%96%E7%95%A5

Explication%20officielle%C2%A0:%20si%20le%20pipeline%20a%20un%20%C3%A9tat%20interne%20(c'est-%C3%A0-dire%20que%20son%20r%C3%A9sultat%20d%C3%A9pendra%20de%20l'%C3%A9tat%20interne,%20pas%20seulement%20d'un%20param%C3%A8tre),%20d%C3%A9finissez%20pur%20%C3%A0%20falsehttps://zhuanlan.zhihu.com/p/96486260%20Dans%20ce%20cas,%20le%20pipeline%20sera%20appel%C3%A9%20une%20fois%20%C3%A0%20chaque%20cycle%20de%20d%C3%A9tection%20de%20changement%20-%20m%C3%AAme%20si%20ses%20param%C3%A8tres%20n'ont%20pas%20chang%C3%A9%20du%20tout%E8%BF%99%E6%A0%B7%E6%88%91%E4%BB%AC%E9%80%9A%E8%BF%87%20%0ALorsqu'il%20est%20vrai,%20le%20tube%20est%20pur,%20ce%20qui%20signifie%20que%20la%20m%C3%A9thode%20transform()%20est%20invoqu%C3%A9e%20uniquement%20lorsque%20ses%20arguments%20d'entr%C3%A9e%20changent.%20Les%20tubes%20sont%20purs%20par%20d%C3%A9faut.

pipe%20%E4%BB%A3%E6%9B%BF%E6%A8%A1%E6%9D%BF%E4%B8%AD%E7%9A%84%E6%96%B9%E6%B3%95%EF%BC%8C%E5%B0%B1%E5%87%8F%E5%B0%91%E4%BA%86%20angular%20%E6%A8%A1%E6%9D%BF%E4%B8%AD%E4%B8%8D%E5%BF%85%E8%A6%81%E7%9A%84%E8%B0%83%E7%94%A8%E3%80%82,%20sera%20d%C3%A9tect%C3%A9%20avec.%20changes%20Appel%C3%A9%20plusieurs%20fois,%20que%20la%20valeur%20ait%20chang%C3%A9%20ou%20non%20%E6%80%BB%E7%BB%93

%E5%BD%93%E6%A8%A1%E6%9D%BF%E4%B8%AD%E6%95%B0%E6%8D%AE%E4%B8%BA%E9%9D%99%E6%80%81%E6%95%B0%E6%8D%AE%E9%9C%80%E8%A6%81%E8%BD%AC%E6%8D%A2%E6%88%96%E5%8A%A0%E5%B7%A5%E6%97%B6%EF%BC%8C%E8%B0%83%E7%94%A8pipe%E6%AF%94%E8%B0%83%E7%94%A8%E6%96%B9%E6%B3%95%E5%A5%BD%E3%80%82

%20%5BFran%C3%A7ais%5D%20Compr%C3%A9hension%20approfondie%20de%20la%20%E6%9B%B4%E5%A4%9A%E7%BC%96%E7%A8%8B%E7%9B%B8%E5%85%B3%E7%9F%A5%E8%AF%86%EF%BC%8C%E8%AF%B7%E8%AE%BF%E9%97%AE%EF%BC%9A%20strat%C3%A9gie%20de%20d%C3%A9tection%20de%20changement%20onPush

https%20://zhuanlan%20.zhihu.com/p/9%E7%BC%96%E7%A8%8B%E6%95%99%E5%AD%A6%EF%BC%81%EF%BC%81%F0%9F%8E%9C%F0%9F%8E%9C2%F0%9F%8E%9C0

%F0%9F%8E%9C%F0%9F%8E%9C%F0%9F%8E%9C%F0%9F%8E%9C%20Appels%20inutiles%20dans%20les%20mod%C3%A8les%F0%9F%8E%9C

🎜

Lorsque les données du modèle sont des données statiques et doivent être converties ou traitées, il est préférable d'appeler pipe plutôt que d'appeler méthode🎜 p>

🎜🎜🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!