Typescript：在static function中使用私有object

Question

我如何以漂亮的代碼方式將Angular Material與 Typescript 一起使用？

例如，我不想在我使用 SnackBar 的每個地方都這樣寫：

constructor(public snackBar: MdSnackBar) {}


***
this.snackBar.open('text', {
  duration: 500
}); // and i need to add this yet 10 times: no to good
***

我想創建一個單獨的 class，並只調用它（靜態函數），例如：

constructor(private snackBar: MdSnackBar) {
}

public static showSnackBar(text: string, config: string): void {
  this.snackBar.open(text, config);
}

但是我得到了錯誤：

Property 'snackBar' does not exist on type 'typeof SnackBar'.

當我轉換我的代碼時：

  static snackBar: MdSnackBar;

  constructor() {
  }

  public static showSnackBar(text: string, config: string): void {
    SnackBar.snackBar.open(text);
  }

並從另一個分類中調用它，我得到：

EXCEPTION: Cannot read property 'open' of undefined
ErrorHandler.handleError @ error_handler.js:47
next @ application_ref.js:272
schedulerFn @ async.js:82
SafeSubscriber.__tryOrUnsub @ Subscriber.js:223
SafeSubscriber.next @ Subscriber.js:172
Subscriber._next @ Subscriber.js:125
Subscriber.next @ Subscriber.js:89
Subject.next @ Subject.js:55
EventEmitter.emit @ async.js:74
NgZone.triggerError @ ng_zone.js:278
onHandleError @ ng_zone.js:257
ZoneDelegate.handleError @ zone.js:236
Zone.runTask @ zone.js:157
ZoneTask.invoke @ zone.js:335
error_handler.js:52 ORIGINAL STACKTRACE:
ErrorHandler.handleError @ error_handler.js:52
next @ application_ref.js:272
schedulerFn @ async.js:82
SafeSubscriber.__tryOrUnsub @ Subscriber.js:223
SafeSubscriber.next @ Subscriber.js:172
Subscriber._next @ Subscriber.js:125
Subscriber.next @ Subscriber.js:89
Subject.next @ Subject.js:55
EventEmitter.emit @ async.js:74
NgZone.triggerError @ ng_zone.js:278
onHandleError @ ng_zone.js:257
ZoneDelegate.handleError @ zone.js:236
Zone.runTask @ zone.js:157
ZoneTask.invoke @ zone.js:335
error_handler.js:53 TypeError: Cannot read property 'open' of undefined
    at Function.SnackBar.showSnackBar (snack-bar.ts:13)
    at SafeSubscriber._next (edit.component.ts:78)
    at SafeSubscriber.__tryOrUnsub (Subscriber.js:223)
    at SafeSubscriber.next (Subscriber.js:172)
    at Subscriber._next (Subscriber.js:125)
    at Subscriber.next (Subscriber.js:89)
    at CatchSubscriber.Subscriber._next (Subscriber.js:125)
    at CatchSubscriber.Subscriber.next (Subscriber.js:89)
    at MapSubscriber._next (map.js:83)
    at MapSubscriber.Subscriber.next (Subscriber.js:89)
ErrorHandler.handleError @ error_handler.js:53
next @ application_ref.js:272
schedulerFn @ async.js:82
SafeSubscriber.__tryOrUnsub @ Subscriber.js:223
SafeSubscriber.next @ Subscriber.js:172
Subscriber._next @ Subscriber.js:125
Subscriber.next @ Subscriber.js:89
Subject.next @ Subject.js:55
EventEmitter.emit @ async.js:74
NgZone.triggerError @ ng_zone.js:278
onHandleError @ ng_zone.js:257
ZoneDelegate.handleError @ zone.js:236
Zone.runTask @ zone.js:157
ZoneTask.invoke @ zone.js:335
Subscriber.js:227 Uncaught TypeError: Cannot read property 'open' of undefined
    at Function.SnackBar.showSnackBar (snack-bar.ts:13)
    at SafeSubscriber._next (edit.component.ts:78)
    at SafeSubscriber.__tryOrUnsub (Subscriber.js:223)
    at SafeSubscriber.next (Subscriber.js:172)
    at Subscriber._next (Subscriber.js:125)
    at Subscriber.next (Subscriber.js:89)
    at CatchSubscriber.Subscriber._next (Subscriber.js:125)
    at CatchSubscriber.Subscriber.next (Subscriber.js:89)
    at MapSubscriber._next (map.js:83)
    at MapSubscriber.Subscriber.next (Subscriber.js:89)
SnackBar.showSnackBar @ snack-bar.ts:13
(anonymous) @ edit.component.ts:78
SafeSubscriber.__tryOrUnsub @ Subscriber.js:223
SafeSubscriber.next @ Subscriber.js:172
Subscriber._next @ Subscriber.js:125
Subscriber.next @ Subscriber.js:89
Subscriber._next @ Subscriber.js:125
Subscriber.next @ Subscriber.js:89
MapSubscriber._next @ map.js:83
Subscriber.next @ Subscriber.js:89
onLoad @ xhr_backend.js:72
ZoneDelegate.invokeTask @ zone.js:265
onInvokeTask @ ng_zone.js:227
ZoneDelegate.invokeTask @ zone.js:264
Zone.runTask @ zone.js:154
ZoneTask.invoke @ zone.js:335

我做錯了什么，我誤解了什么？

Answer 1

如果它是靜態函數，則只能使用'this'的靜態成員

Answer 2

您可以在類中創建靜態方法，然后通過類名將其導入。

例：

export class AStaticServiceClass {

  static doStuff(){
    return "I'm Static";
  }
}

並在任何需要的地方使用它：

this.name = AStaticServiceClass.doStuff();

通過導入類。

完整的竊聽器示例： http ://plnkr.co/edit/NWRSuaUpzkPEP3gL1DKK?p=preview

Answer 3

這是我在與問題內容相同的情況下使用的解決方案。

第 1 步：將 class 與 static function 一起創建，以使用 snackbar 顯示消息

export class AlertMessageUtils {

  private static snackBar: MatSnackBar;         

  public static setSnackBar(snackBar: MatSnackBar){

    this.snackBar = snackBar;
  }

  public static showAlert(message: string, duration: number, positionV: any, positionH: any){
 
    this.snackBar.open(message, 'Close', {
      duration: duration * 1000,
      verticalPosition: positionV,
      horizontalPosition: positionH
    });
  }

}

第 2 步：更新應用程序組件 - 將 MatSnackBar 設置為 AlertMessageUtils class。

export class AppComponent implements AfterViewInit {

  constructor(private snackBar: MatSnackBar ){ }  

  ngAfterViewInit() {
   
    AlertMessageUtils.setSnackBar(this.snackBar);
  }

}

第 3 步：現在我們可以在整個應用程序中使用 AlertmessageUtils，只需調用其 static function，如下所示

AlertMessageUtils.showAlert('This is a test message...', 5, 'top', 'center');