0

当我尝试订阅 Subject folder_id 时，当我在 files 组件中传递 id 时，它没有订阅 board 组件。

当在文件组件中按下按钮时会触发此 boardId 函数。activateId 是从 url 的快照中获取的 id。

  boardID(){
    this.apiService.folder_id.next(this.activateID.id);
    console.log(this.activateID.id);
  }

这是 board 组件中的 ngOnInit，它必须订阅从 files 组件发出的 id。但是由于某种原因，当我尝试获取此组件中的 id 时，它不会运行此订阅功能。

  ngOnInit() {
    
    this.apiService.folder_id.subscribe(
      (_id : string) => {
       this.id = _id;
       console.log(this.id)
       
     }
   );

    this.page = 0;
    console.log('Screen width :', this.scrWidth, 'Screen height', this.scrHeight);

    // getting the 2D context of Canvas element
    this.canvasElement = this.canvas.nativeElement;
    this.ctx = this.canvasElement.getContext('2d');
    // setting the Width and Height to the canvas element
    this.renderer.setAttribute(this.canvasElement, 'width', this.scrWidth);
    this.renderer.setAttribute(this.canvasElement, 'height', this.scrHeight);

    // for background
    this.backgroundCanvas = this.background.nativeElement;
    this.renderer.setAttribute(this.backgroundCanvas, 'width', this.scrWidth);
    this.renderer.setAttribute(this.backgroundCanvas, 'height', this.scrHeight);

  }

现在这是 service.ts 文件：-

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Router } from '@angular/router';
import { environment } from 'src/environments/environment';
import { Subject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class RestService {

  xAuthToken = null;
  boardId = null;
  gerBoardDetails = null;
  createFolderResponse = null;
  deleteFolderResponse = null;

  folder_id = new Subject<string>();
  
  constructor(private http: HttpClient, public router: Router) {}

有人可以帮我解决这个问题吗，我已经坚持了很多天了。谢谢你。

4

3 回答 3

2

您应该在构造函数方法中声明您的订阅方法，否则它将只运行一次（在ngOnInit阶段期间），并且如果您的订阅在此执行期间未捕获任何值，它将不会捕获任何其他值。在构造函数上声明 subscribe 方法，您将能够看到发出的每个事件。

然后，如果我正确理解您的问题，您希望将主题从服务发送到组件。为此，您需要Subject在服务上有一个类型，在您Observable的组件上有一个类型，这样您就可以监听从主题发出的事件。此外，将需要提供您的主题，Observable以便您可以观看它。

尝试像这样重构您的代码：

服务.ts

folder_id = new Subject<string>();

emitFolderId(id: string) {
  this.folder_id.next(id);
}

getObservable() {
  return this.folder_id.asObservable();
}

组件.ts

folder_id$: Observable<string>;

id: string;

constructor(private apiService: RestService) {
  folder_id$ = apiService.getObservable();
  folder_id$.subscribe(folder_id => {
      this.id = folder_id;
    }
  );
}

boardID() {
  this.apiService.emitFolderId(this.id);
}

然后，您应该正确呈现您的 ID。

如果您不确定主题出现时是否呈现组件，请尝试替换Subject为BehaviourSubject.

当BehaviourSubject没有其他活动时，它将向他的观察者提供最后一个值，因此您将能够观察从 BehaviourSubject 发出的每个最后一个值，唯一的区别是您使用起始值实例化它，以便它可以发出第一个值当它被实例化时。

folder_id = new BehaviourSubject<string>(null);
于 2020-11-25T17:54:09.103 回答
0 
    at RestService you must make 2 function methode
     1. setData(data: string ) {
       this.folder_id.next(data)
      }
    
     2. getData(res): Subscription {
     return this.folder_id.subscribe(res) 
     }

    and call getData function in your component 
    this.RestService.getData(res => { 
      console.log(res)
    })
于 2020-11-25T17:07:26.267 回答
0

你应该首先将你的 Subject 变成一个 Observable，如下所示：

folder_id$ = this.apiService.folder_id.asObservable();

然后在你的 onInit 中订阅它：

this.apiService.folder_id$
    .subscribe((_id : string) => {
        this.id = _id;
        console.log(this.id) 
    }

但是，如果您在发出一个值之后订阅这个 observable ，您将看不到它，因为该值是在您订阅它之前发出的。在这种情况下，您应该使用ReplaySubject来发出先前的值。

于 2020-11-25T17:26:57.387 回答