Question

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

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

在TS文件中：

public getUserName() {
    return 'Arpit';
}

在HTML文件中：

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

但是，这样做有一个问题：将console.log放在getUserName函数中时，它将多次打印该控制台消息。我不知道为什么会这样。

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

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

它看起来像一个不清楚的代码，并且代码看起来并不漂亮。

因此，从最佳实践的角度和效率的角度来看，我正在寻找可以解决我的问题的解决方案。

谢谢。

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;
}

Answer 2

之所以发生这种情况，是因为Angular在其整个生命周期中多次运行了此功能。他多次检查并更新函数和变量的值。

这就是为什么您多次看到它的原因。

现在使用“最佳实践”解决方案：因为听起来很合逻辑，所以我可以为您提供使用建议，但是我不确定这是最佳实践。

让我们从您的功能开始：

public getUserName() {
  return 'Arpit';
}

这没有用。您的函数仅返回一个字符串值，而没有执行其他任何操作。

在这种情况下，由于其唯一目的是返回内容，因此可以使用readonly变量或getter：

readonly username = 'Arpit';
get username() { return 'Arpit'; }

现在，关于您的条件：您不必这样写，在这种情况下，您确实可以使用一个函数。在几种情况下可以选择如何使用功能。

第一个是业务规则案例。假设Arpit在他18岁生日时是一名管理员（业务规则）。在这种情况下，它给出以下内容：

*ngIf="isEighteenAndArpit()"

isEighteenAndArpit() { return this.user && this.user.username === 'Arpit' && this.username.age === 18; }

但是，如果您想使其更加通用，则可以例如传入这样的配置对象：

*ngIf="checkCondition({'username': 'Arpit', 'age': 18})"

checkCondition(config: Object) { 
  return !Object.keys(config).some(key => this.user[key] !== config[key]);
}

Answer 3

是的，它将持续关注您的表情

我建议您在插值中使用变量而不是函数，一旦满足所有条件，变量将设置为 TRUE

示例：

public user: any = {
 role: 'super_admin',
 status: 'active'
} 
public conditionCheck = false;

public checkCondition(userObj) {
 if (userObj && userObj.role === 'super_admin' && userObj.status === 'active' && 
   ...) {
   this.conditionCheck = true;
 }
}

在Angular 4+中内插数据的最佳方法

3 个答案: