使用属性参考进行变更检测

Question

我似乎无法弄清楚如何让我的模板更新。 当我更改在另一个数组属性中引用的 boolean 属性时，我希望我的更改会在模板中发生更改。 但是，我没有看到这些变化。

当应用程序加载时，所有内容都加载到其初始 state 中（ false ： Login可见并且Logout隐藏），但是当isLogged boolean 更改时，导航不会更新以隐藏/显示正确的项目。

我认为问题在于 Angular 如何处理对象/数组的更改检测，但我不确定。

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

  public isLogged: boolean = false;

  public navigation: INav = {
    links: [
      {
        text: 'Login'
        hidden: !this.isLogged
      },
      {
        text: 'Logout'
        hidden: this.isLogged
      }
    ]
  }

  public ngOnInit(): void {
    // Triggered whenever the login state changes
    this.authService.loginState().subscribe(state => {
      this.isLogged = state;
    });
  }

}

<third-party-nav [model]="navigation"></third-party-nav>

Answer 1

这个问题与角度的变化检测无关。 您的代码中的问题是您在创建组件时仅设置一次导航（因此变量 isLogged 为 false）。 相反，您应该在 loginState 更改时更新它。 你可以通过使用 observables/rxjs 来做到这一点：

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


  public navigation: Observable<INav>;

  public ngOnInit(): void {
    // When the login state changes the navigation object also changes
    this.navigation = this.authService.loginState().map(s => ({
      links: [
        {
          text: 'Login',
          hidden: !s
        },
        {
          text: 'Logout',
          hidden: s
        }
      ]
    }));
  }
}

然后在您的 html 中，您可以使用异步 pipe 来处理 observable

<third-party-nav [model]="navigation | async"></third-party-nav>