Question

我最近遇到了一个问题，此时无法弄清楚我的代码有什么问题，希望有人可以帮助我。

我要做的就是用功能改变BehaviorSubject的价值，但它还没有结束。

chat.service.ts

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';

@Injectable()
export class ChatService {
  chatId = new BehaviorSubject<number>(0);

  constructor() {
    this.chatId.next(1);
  }

  changeChatId(chatId: number) {
    console.log(chatId);
    this.chatId.next(chatId);
  }
}

因此，订阅者从构造函数中获取默认值以及更改的chatId。但是当我尝试使用 changeChatId 函数更改它时，根本没有任何事情发生。正确的id会被传递到我已经调试过的函数中，但是行 this.chatId.next（chatId）似乎没有做任何事情。

添加

这些是当前使用该服务的其他组件。

聊天消息列表

import { Component, OnInit, Input} from '@angular/core';
import { ChatService } from "../../../shared/services/chat.service";

@Component({
  selector: 'app-chat-message-list',
  templateUrl: './chat-message-list.component.html',
  styleUrls: ['./chat-message-list.component.css'],
  providers: [ChatService]
})
export class ChatMessageListComponent implements OnInit {
  chatId: number;

  constructor(private chat: ChatService) { }

  ngOnInit() {
    this.chat.chatId.subscribe(
      chatId => this.updateMessageList(chatId)
    );
  }

}

聊天项

import { Component, OnInit, Input} from '@angular/core';
import { User } from '../../../shared/models/user.model';
import { ChatService } from '../../../shared/services/chat.service';

@Component({
  selector: 'app-chat-list-item',
  templateUrl: './chat-list-item.component.html',
  styleUrls: ['./chat-list-item.component.css'],
  providers: [ChatService]
})
export class ChatListItemComponent implements OnInit {
  @Input() 
  user: User;

  constructor(private chat: ChatService) { }

  ngOnInit() {
  }

  onChatItemSelected(){
    this.chat.changeChatId(this.user.id);
  }
}

Answer 1

您需要将ChatService设为单件（共享）服务。将其添加到ngModule的提供程序。这允许使用ChatService的所有组件共享相同的服务实例。

@NgModule({
    providers: [ChatService]
})

将其从组件提供商处删除。当您将其添加到组件提供程序时，该组件将获得其自己的ChatService实例，而其他组件无法使用该实例。

在我的Angular App

1 个答案: