Question

我有一个函数，当使用它时需要一个单独的头组件来刷新。

Foo组件 （需要重新加载标头组件）

handleTimeListChange(value) {
    this.cp = value.
    localStorage.setItem('cp', this.cp);

    //reload header.component
  }

结果应该是在使用时间 handleTimeListChange 时，电话将重新加载（header.component）

Answer 1

对于此问题，您可以使用rxjs SubjectBehaviour.make这样的随机服务

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

    @Injectable()
    export class RandomService {

      private msgsource = new BehaviorSubject<string>('this is the default');
      telecast = this.msgsource.asObservable();

      constructor() { }

      editMsg(newmsg) {
        this.msgsource.next(newmsg);
      }

    }

要从中发送数据的此组件，声明该服务方法，然后将日期发送给该方法，并在调用该服务方法的任何地方将数据反映它们。

      import { Component, OnInit, Input } from '@angular/core';
        import { RandomService } from '../random.service';

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

          @Input('incomingmsg') newrandmsg: string;

          message: string;
          editedmsg: string;

          constructor(private someserv: RandomService) { }

          ngOnInit() {
          }

          editthemsg() {
            this.someserv.editMsg(this.editedmsg);
          }

        }

现在将数据接收到ngOnInit中的标头组件，它将检测该服务方法中的任何值更改。

标题组件

ngOnInit() {
        this.someserv.telecast.subscribe(message => this.message = message);
      }

每当有任何变化受到随机服务时，它将检测并显示数据到标头组件。

Answer 2

您可以使用BehaviorSubject在整个应用程序的不同组件之间进行通信。您可以定义一个包含BehaviorSubject的数据共享服务，可以订阅并发出更改。

请参阅此答案：https://stackoverflow.com/a/46049546/4899523

来自单独组件的Angular 4 Reload标头组件

2 个答案: