从单独的组件重新加载 Angular 4 标题组件

Question

我有一个函数，当它被使用时需要重新加载单独的头部组件。 Foo 组件 (需要重新加载头部组件)

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

    //reload header.component
  }

当使用时间处理函数 handleTimeListChange 时，调用将重新加载（header.component）。

- Alex D

---

你为什么想要重新加载header.component？有什么原因吗？ - Chellappan வ

我在头部有一些数据，将使用新的setItem并刷新。 - Alex D

请考虑提供一个最小、完整、可验证的示例，如果可能的话，这样我们就可以在“真实”环境中看到问题。也许可以使用https://stackblitz.com/? - lealceldeiro

如果我能重新加载组件，它就可以使用新设置的数据。foo.component 有 handletimelistchange，当该项被设置时，header.component 将需要重新加载。 - Alex D

我认为你不需要重新加载组件，只需刷新数据。是吗？ - lealceldeiro

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);
      }

每当随机服务发生任何更改时，它将检测并将数据显示到标题组件中。

- Ankit

Answer 2

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

参考答案：https://dev59.com/fFYO5IYBdhLWcg3wTPvk#46049546

- Abdul Rafay