0

我的 Angular 项目有问题，我需要调用组件导出类中的一个函数。但我需要从另一个 TypeScript 文件中调用它，这不是一个组件。该函数需要在导出类中，因为它显示了一个 MatSnackBar。函数 setLoggedInStatusAndName 是从我的 Typescript 文件中调用的，它不是一个组件。你可以在下面看到我的代码：

import { Component, OnInit } from '@angular/core';
import {InitAirConsole, MessageClass, SendMessageToScreen} from "../../../airconsole/airconsoleService";
import {MatSnackBar} from "@angular/material/snack-bar";
let playerName = "";
let isLoggedIn = false;
let isLeader = false;
let gameStartable = false;
let loginButtonText = "Login";
@Component({
  selector: 'app-login-form',
  templateUrl: './login-form.component.html',
  styleUrls: ['./login-form.component.scss']
})



export class LoginFormComponent {
  constructor(private snackBar: MatSnackBar) { //
    InitAirConsole();
  }
  get playerName(){
    return playerName;
  }
  set playerName(value:string){
    playerName = value;
  }
  get loggedIn(){
    return isLoggedIn;
  }
  get loginButtonText(){
    return loginButtonText;
  }
  get gameStartable(){
    return gameStartable;
  }
  sendNameOrStartGame() {
    if(gameStartable){
      //start the game
    }else{
      if(playerName !== ""){
        setLoggedInStatusAndName(true,false, playerName);
        SendMessageToScreen({
          'messageClass': MessageClass.LOGIN,
          'name': playerName
        })
      }else{
        this.openRedSnackBar("You need to enter a name!", 5);
      }

    }
  }
  openRedSnackBar(message:string, durationInSeconds:number){
    this.snackBar.open(message, '', {
      duration: durationInSeconds * 1000,
      panelClass: ['red-snackbar']

    })
  }

}


export function setLoggedInStatusAndName(loggedIn:boolean,leader:boolean,name:string){
  isLoggedIn = loggedIn;
  playerName = name;
  isLeader = leader;
    if(isLeader && isLoggedIn){
      loginButtonText = "Minimum amount of players is 2, currently there is just you!";
    }else if(!isLoggedIn){
      loginButtonText = "Login";
      //somehow I need to call the openSnackBar methode inside the export function here 
      //something like: openRedSnackBar("You could not be logged in, maybe your chosen name is already in use", 5);
    }else{
      loginButtonText = "Waiting for game leader to start the game";
    }
}

export function setPlayerAmount(newPlayerAmount:number){
  if(isLeader && isLoggedIn){
    if(newPlayerAmount > 1){
      loginButtonText = "To start the game click here!";
      gameStartable = true;
    }else{
      loginButtonText = "Minimum amount of players is 2, currently there is just you!";
      gameStartable = false;
    }
  }
}
4

1 回答 1

2

有一些黑客可以做到这一点。但不建议这样做，因为业务逻辑应该与视图分离。

考虑创建这样的服务AlertService，可以使用以下方法 -

openRedSnackBar(message:string, durationInSeconds:number){
    this.snackBar.open(message, '', {
        duration: durationInSeconds * 1000,
        panelClass: ['red-snackbar']
    })
}

或其他方法，如openFooBar().

然后你应该有另一个服务，UserAuthService或者UserStateService应该有类似的方法 -

setLoggedInStatusAndName(loggedIn:boolean, leader:boolean, name:string) {
  isLoggedIn = loggedIn;
  playerName = name;
  isLeader = leader;
    if(isLeader && isLoggedIn){
      loginButtonText = "Minimum amount of players is 2, currently there is just you!";
    }else if(!isLoggedIn){
      loginButtonText = "Login";
      this.alertService.openSnackBar();
    }else{
      loginButtonText = "Waiting for game leader to start the game";
    }
}
于 2021-07-20T16:32:32.563 回答