要将两个玩家连接在一起,可以使用Angular 8中的单例服务。以下是一个包含代码示例的解决方法:
首先,创建一个名为PlayerService的单例服务,用于管理玩家之间的连接。可以使用Angular的@Injectable装饰器将该服务声明为一个可注入的依赖项。
player.service.ts:
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class PlayerService {
private player1: string;
private player2: string;
constructor() { }
setPlayer1(player: string) {
this.player1 = player;
}
setPlayer2(player: string) {
this.player2 = player;
}
getPlayer1() {
return this.player1;
}
getPlayer2() {
return this.player2;
}
}
然后,在两个组件中使用PlayerService来连接两个玩家。在每个组件中,通过依赖注入的方式将PlayerService注入到构造函数中。
player1.component.ts:
import { Component } from '@angular/core';
import { PlayerService } from './player.service';
@Component({
selector: 'app-player1',
template: `
Player 1
`
})
export class Player1Component {
playerName: string;
constructor(private playerService: PlayerService) { }
connectPlayer() {
this.playerService.setPlayer1(this.playerName);
}
}
player2.component.ts:
import { Component } from '@angular/core';
import { PlayerService } from './player.service';
@Component({
selector: 'app-player2',
template: `
Player 2
`
})
export class Player2Component {
playerName: string;
constructor(private playerService: PlayerService) { }
connectPlayer() {
this.playerService.setPlayer2(this.playerName);
}
}
最后,在需要展示连接状态的组件中使用PlayerService来获取玩家的连接状态。
status.component.ts:
import { Component } from '@angular/core';
import { PlayerService } from './player.service';
@Component({
selector: 'app-status',
template: `
Status
Player 1: {{ playerService.getPlayer1() }}
Player 2: {{ playerService.getPlayer2() }}
`
})
export class StatusComponent {
constructor(public playerService: PlayerService) { }
}
这样,当玩家在player1.component.ts和player2.component.ts中输入并点击连接按钮时,PlayerService会将玩家的名称保存下来。在status.component.ts中,可以通过PlayerService获取已连接的玩家名称并展示出来。
请注意,在使用上述代码时,确保PlayerService在应用的根模块中提供(即在AppModule的providers数组中添加PlayerService)以确保它是一个单例服务。