javascript - 在 HTML 中向 Angular 传递参数时如何引用 JavaScript 包？

Question

我想让以下内容更像是一个专横的人。

<div (click)="lastCall(999)">click me</div>

我尝试使用Number.MAX_SAFE_INTEGER，但计算机提示它无法被识别。所以下面的方法不起作用。

<div (click)="lastCall(Number.MAX_SAFE_INTEGER)">click me</div>

我必须像这样在 TS 文件中声明一个属性。

private max: number = Number.MAX_SAFE_INTEGER;

然后然后这样引用它。

<div (click)="lastCall(max)">click me</div>

有没有办法直接在通话中传递Number.MAX_SAFE_INTEGER;？怎么办？

Answer 1

你必须写的原因

export class MyComponent {
  max = Number.MAX_SAFE_INTEGER; // type inference FTW
}

虽然模板逻辑上是组件的一部分，但它无法访问与组件类相同的词法环境。 MyComponent 能够访问它的原因是 MyComponent 是普通的旧 JavaScript 代码。

模板存在于不同的环境中。

如果使用不涉及全局变量的示例，这一点会变得更清楚。

考虑

类别:

import {π} from 'app/constants';

export class MyComponent {
  updateArea(radius: number) {
    this.area = π * radius ** 2;
  }

  area?: number;
}

模板:

<input #radius type="number">
<button (click)="updateArea(radius.value)">
<span>{{area}}</span>

在上面，MyComponent.prototype.updateArea 是一个闭包。由于词法作用域，它可以访问导入的 π 变量。

如果我们想直接在模板中使用π，我们必须将其附加到模板范围内的内容上。通常我们只是将它附加到组件实例本身，就像您所做的那样。

import {π} from 'app/constants';

export class CommonNumericalStuffComponent {
  π = π;
}

π 永远不会改变。将其放入服务中是无稽之谈。

对于此类用例，我认为您的“解决方法”(如上面最后一个示例中重复的那样)实际上是正确的方法。