angular的发布订阅失效了?

fftu
  • 121

global.service.ts

import { Injectable } from "@angular/core";
import { Observable } from "rxjs";
import { Subject } from "rxjs";
import { BehaviorSubject } from "rxjs";

@Injectable()
export class GlobalService {
    private subject = new Subject<any>();

    send(message: any) {
        console.log('111');
        this.subject.next(message);
    }

    get(): Observable<any> {
        console.log("222");
        return this.subject.asObservable();
    }
}

tabs.page.ts
this.globalService.send(Math.random());

app.component.ts

this.globalService.get().subscribe((res) => {
    console.log(res);
});

期待的效果:tab组件send一个值,service中发布,app.component订阅到值打印。

但现在只有前半段执行了,订阅并没有生效:'222'只在初始化的时候执行了一次;之后每次send,'111'打印了,'222'并不会打印。

请告诉我应该怎么实现订阅呢,谢谢。


做的修改

这样修改连订阅方法页不进了。

============================
加入providedIn

observer里还是空的。

两个引用service的文件都是这样引入的

回复
阅读 1.5k
1 个回答
✓ 已被采纳

这样写好一点

@Injectable({
  providedIn: 'root'
})
export class SendService {
  private subject = new Subject<any>();
  send$: Observable<any> = this.subject.asObservable();

  constructor() {
  }

  send(message: any): void {
    this.subject.next(message);
  }

}
  @Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  isCollapsed = false;

  constructor(private sendService: SendService
  ) {
    this.sendService.send$.subscribe(message => {
      console.log(message, this.sendService.send$);

    });
  }

}
  }
@Component({
  selector: 'app-welcome',
  templateUrl: './welcome.component.html',
  styleUrls: ['./welcome.component.scss'],
})
export class WelcomeComponent implements OnInit {


  constructor( private sendService: SendService) {
  }
  ngOnInit(): void {
  }

  sendMessage(): void {
    this.sendService.send(new Date().getTime());
  }

}

然后关于订阅,订阅的方法是subscribe这个,也就是说你每次next的时候subscribe的方法会被调用.
get 方法不是rxjs的,你这么写,只是获取Observable的时候会有一次调用而已

===

==
Service类使用

@Injectable({
providedIn: 'root'
})

表明这个服务是应用级别的,在一个应用里面是单例的,这样你在任何地方注入的才是同一份,这样你的AppComponent和其他Module才能顺利共享这个Observable

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏