Typescript：在静态函数中使用私有对象

9w11ddsr 于 2022-12-14 发布在 TypeScript

关注(0)|答案(3)|浏览(154)

如何以一种漂亮的代码方式使用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
***

我想创建一个单独的类，并且只调用它（静态函数），例如：

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

我做错了什么，我误解了什么？

typescript

来源：https://stackoverflow.com/questions/41544366/typescript-use-private-object-in-static-function

3条答案

按热度按时间

2ul0zpep1#

如果是静态函式，您只能使用'this'的static成员

赞(0）回复(0）举报 2022-12-14

wbrvyc0a2#

您可以在类别中建立静态方法，然后依类别名称汇入它们。
示例：

export class AStaticServiceClass {

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

并将其用于任何需要的位置：

this.name = AStaticServiceClass.doStuff();

通过导入类。
完整柱塞示例：http://plnkr.co/edit/NWRSuaUpzkPEP3gL1DKK?p=preview

赞(0）回复(0）举报 2022-12-14

nbewdwxp3#

这是我在与问题内容相同的情况下使用的解决方案。
步骤1：创建一个类，其中包含使用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
    });
  }

}

第二步：更新app组件--将MatSnackBar设置到AlertMessageUtils类中。

export class AppComponent implements AfterViewInit {

  constructor(private snackBar: MatSnackBar ){ }  

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

}

第3步：现在我们可以在整个应用程序中使用AlertmessageUtils，只需调用它的静态函数，如下所示

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

赞(0）回复(0）举报 2022-12-14

我来回答

Typescript：在静态函数中使用私有对象

3条答案

相关问题

热门标签

最新问答