将函数的 return 值传递给自定义 Angular 组件

Question

像这样将值传递给自定义组件有什么问题吗？我注意到当我在 someFunction 中 console.log 时，它在加载组件时被调用了很多次。有人可以解释一下吗？

HTML

<custom-component [someInput]=“someFunction(‘someParameter’)></custom-component>

TS

someFunction(someParameter) {
    return someValue
}

Answer 1

是的，你是对的，

在angular中你不应该在template中调用functions。

原因

angular 的主要目标是，Rendering DOM 检测任何变化。因此，如果 angular 在您的应用程序中检测到任何 changes/updates，它将 重新呈现 模板。所以当它每次 re-render 时，你在 template(props) 中使用的 function 将是打电话。

Always follow the best practices

why-you-should-never-use-function-calls-in-angular-template-expressions

将函数的 return 值传递给自定义 Angular 组件

Passing the return value of a function into a custom Angular component

javascript

input

typescript

angular-components

angular