为什么我的视图没有更新？

Question

我正在学习Angular 6（和前端开发）。以下示例说明了我如何尝试从home.component.html更改navigation.component.html中的视图。使用console.log，我可以看到该函数按原样运行，并且布尔值也相应更改，但是该更改未在视图中表示。看来，视图组件仅使用其配对控制器组件中的更改进行更新。有人可以解释为什么以及如何完成任务吗？

app.component.html：

<app-navigation></app-navigation>
<router-outlet></router-outlet>

navigation.component.html：

<button (click)='homeComp.toggleAuth()'> Sign In </button>

home.component.ts：

viewAuthComponent: boolean;

toggleAuth() {
  this.viewAuthComponent = !(this.viewAuthComponent);
  console.log(this.viewAuthComponent);
}

home.component.html：

 {{ viewAuthComponent }}