angular 从外部调用组件函数

Question

我的 angular 项目有问题，我需要调用组件导出 class 中的一个函数。但是我需要从另一个不是组件的 TypeScript 文件调用它。该函数需要在导出 class 内部，因为它显示了一个 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;
    }
  }
}

Answer 1

您可以通过一些技巧来做到这一点。但不推荐这样做，因为业务逻辑应该与视图分开。

考虑创建一个像 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";
    }
}

angular 从外部调用组件函数

angular call component function from outside

typescript

angular-material

airconsole

angular