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

Question

我在从另一个组件更新角度组件变量时有一个奇怪的行为。有人可以告诉我为什么会发生这种情况还是我做错了什么？

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

home.component.ts

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

header.component.ts

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

}

这是我的日志输出

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

Answer 1

我的解决方案将从 RootComponent 传递对 HeaderComponent 的引用 同时包含 HeaderComponent 和 HomeComponent，我不会让 HeaderComponent 可注入

RootComponent.html

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

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

HomeComponent.ts

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

之后从任何提供者中删除任何组件