页面无法按条件工作

Question

我有一个角度应用程序，这里是设置：

1）PageStateService：

import {
  Injectable
} from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class PageStateService {
  page: string = "board";

  changePage(switchTo: string) {
    console.log("X");
    this.page = switchTo;
    console.log(this.page);
  }

  constructor() {}
}

2）每个组件都包含此服务并将其作为依赖项注入。

3）仪表板组件：

<div class="wrapper">
    <app-sidenav></app-sidenav>
    <div class="sub-wrapper">
        <app-bar></app-bar>
        <app-board ng-if="pageState.page === 'board'"></app-board>
        <app-stock ng-if="pageState.page === 'stock'"></app-stock>
    </div>
</div>

4）我有一个sidenav组件，负责更改状态：

<button type="button" class="btn btn-light active" (click)="pageState.changePage('board')">
  <span>
    <i class="material-icons">
      dashboard
    </i>
  </span> Dashboard</button>
<button type="button" class="btn btn-light" (click)="pageState.changePage('stock')">
  <span>
    <i class="material-icons">
      store
    </i>
  </span> Stock</button>

问题：当我单击一个按钮时，控制台将页面变量与X一起记录在服务中，但是ng-if不起作用。它不会检查page变量并呈现组件。我也尝试了ng-show。

Answer 1

ng-if是AngularJS语法，请尝试*ngIf="pageState.page === 'board'"

确保将注入的服务定义为public，以便可以从HTML模板对其进行访问。