Angular 从另一个组件更新变量-奇怪行为4

在从另一个组件更新角度组件变量时，我有一个奇怪的行为。有人能告诉我为什么会发生这种情况，或者我做了什么坏事吗

我在home.component的ngOnInit上有两个组件header.component和home.component，我正在调用一个api，并将该响应共享给header.component，以更新header.component.html的值

home.component.ts

header.component.ts

这是我的日志输出

---

预计配置文件变量上会有新值，但在注销时单击，我可以看到该值是旧值。

我的解决方案将从RootComponent'传递对HeaderComponent的引用 包含HeaderComponent和HomeComponent的，我不会使HeaderComponent可注射

RootComponent.html

---

之后，从任何提供程序中删除任何组件

您能告诉我们如何在homecomponent中初始化headerComponent变量吗？使用初始化更新了问题您从homecomponent的提供程序中删除了它吗？我用另一种方法解决了它。无论如何，我感谢您的帮助。谢谢

@Component({
  selector: 'app-home-page',
  templateUrl: 'home.component.html',
  providers: [ProfileService,HeaderComponent]
})
export class HomeComponent implements OnInit {

  constructor(
    private _profileService: ProfileService, 
    private demo:HeaderComponent) {

  }
    ngOnInit() {
    this._profileService.getHomeData()
      .subscribe(response => {
          this.homeData = {
          this.headerComponent.setData(response.json().payload.Profile)
        },
        err => {
          alert('home data error');
        });
  }

@Component({
  selector: "app-layout-header",
  providers: [],
  templateUrl: "./header.component.html"
})
export class HeaderComponent implements OnInit {
  profile={Name:'demo'};

  constructor() {

  }

  ngOnInit() {
    var curr=this
    setInterval(function() {
      console.log(curr.profile)
    },3000)
  }
  ngOnDestroy() {
  }

  logout() {
   console.log(this.profile)
  }

  loadHomeData() {}

  setData(data) {
    console.log(this.profile)
    this.profile=data
    console.log(this.profile)
  }

}

<app-header #header></app-header>

<app-home [headerComponent]="header"></app-home>

export class HomeComponent {
    @Input() headerComponent: headerComponent;
    ...
}