代码之家 › 专栏 › 技术社区 › Parth Agarwal

页面不按一定角度工作

angular

1

Parth Agarwal · 技术社区 · 7 年前

我有一个角度应用程序,设置如下:

1)页面状态服务:

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不起作用。它不会检查页面变量并呈现组件。我也尝试过NG节目。

1 回复 | 直到 7 年前

1

2

PeS 7 年前

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

确保将注入的服务定义为 public 以便可以从HTML模板访问它。