javascript - 在 Angular 4+ 中插入数据的最佳方式

Question

我有一个与 Angular 中的数据插值相关的问题。

例如，如果我必须从函数返回一个值并需要在 UI 中显示该值，那么我将执行如下操作:

在 TS 文件中:

public getUserName() {
    return 'Arpit';
}

在 HTML 文件中:

<p>Welcome: {{getUserName()}}</p>

但是，我遇到了一个问题:当我在 getUserName 函数中放置一个 console.log 时，它会多次打印该控制台消息。我不知道为什么会这样。

我的第二个选择是:我可以在变量中获取 getUserName 函数的值，然后我可以在 HTML 代码中插入该变量。但是这个选项的问题是:如果我们有 10 多个函数，它们返回一些值，那么我们还需要定义 10 多个额外的变量，如果该变量是一个对象，那么我们有时会在 UI 中编写条件，如下所示:

*ngIf="user && user.role === 'super_user' && user.status === 'active'"...

看起来像一段不清楚的代码，代码看起来不会很漂亮。

所以从最佳实践的 Angular 和效率的 Angular ，我正在寻找能够解决我的问题的方案。

谢谢。

Answer 1

您的方法会触发多次，因为 Angular 有变化检测，并且每次运行变化检测时都会运行插值函数。这不是一个好的做法，因为它会消耗大量资源，因此只定义类属性将是更合适的方法，并且在没有真正必要的情况下您的函数不会运行多次。

关于 10+ 变量:如果你想尽量减少变量的数量，你可以将它们逻辑地分组到几个对象中，无论如何，在大多数情况下你需要做的不仅仅是在 HTML 中显示这些变量，这样你将可以访问它们。例如:

public user = {};

ngOnInit() {
  this.user.name = this.getUserName();
  this.user.age = this.getUserAge();
  /* And you can work with "this.user" object further, not just show these values in markup */
}

public getUserName() {
    return 'Arpit';
}

publig getUserAge() {
    return 25;
}