亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

Angular 模板中的靜態函數

Angular 模板中的靜態函數

呼喚遠方 2023-09-28 10:01:25
在我們的項目中,我們使用AirBnB的 linting-config 。這是一條規則,規定類方法必須使用靜態方法this或聲明為靜態方法。從理論上講,這條規則對我來說很有意義,但在角度背景下似乎會引起一些問題。想象一個像這樣的組件(Stackblitz):import { Component, VERSION } from '@angular/core';@Component({  selector: 'my-app',  template: '<p>{{doSomething("hello stack overflow")}}'})export class AppComponent  {  doSomething(string: string): string {    return string.toLocaleUpperCase();  }}現在,linter 會抱怨doSomething不使用它。Wen 現在可以使函數靜態來滿足它 - 但我們將無法在模板中使用該函數。一個結論是,它doSomething不應該是 AppComponent 的一部分,而應該是另一項服務的一部分。但是我們必須再次將靜態函數包裝在非靜態函數中。最終,包裝功能并不比原始功能小多少,因此整個外包給服務的事情似乎毫無意義。特別是因為我們談到的函數明確僅對組件模板有用。這似乎是有問題的,特別是對于trackByof 的跟蹤功能ngForOf- 它們本質上傾向于不使用this關鍵字并且僅在模板中使用,因此它們不能是靜態的。請參閱從 angular2 模板調用靜態函數那么是否存在一種有意義的模式來處理模板中與此規則一起使用的函數,或者它對于角度來說不是一個有用的規則?
查看完整描述

3 回答

?
一只萌萌小番薯

TA貢獻1795條經驗 獲得超7個贊

您還可以在 .ts 外部函數中定義,例如:


export function myFunction(name){

   return "Hello "+name;

}

您只需要一個組件


import {myFunction} from './myfile.ts' 

然后就可以在.ts中使用


   myFunction("Me");

如果你想在 html 中使用,你需要在 .ts 中聲明


  myFunctionI=myFunction;

并使用


  {{myFunctionI('me')}}

其他選項:你的 .ts 喜歡


export function Util() {

    return new UtilClass()

}

class UtilClass {

   greet(name){

       return "Hello "+name;

   }

}

你可以


import {Util} from './myfile-util.ts' 


console.log(Util.greet("me"))


查看完整回答
反對 回復 2023-09-28
?
慕尼黑的夜晚無繁華

TA貢獻1864條經驗 獲得超6個贊

我自己找到了一個令人滿意的解決方案:

我轉換這些函數 - 小,與 UI 相關,(僅)在模板中使用,不使用范圍 ( this) 作為字段,持有箭頭函數。

  doSomething = (string: string): string => string.toLocaleUpperCase();


查看完整回答
反對 回復 2023-09-28
?
拉莫斯之舞

TA貢獻1820條經驗 獲得超10個贊

對于你的情況,我認為管道更好。



查看完整回答
反對 回復 2023-09-28
  • 3 回答
  • 0 關注
  • 221 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號