强制组件在 ionic v4-beta 中重新渲染

Question

我有一个应用程序，在选项卡栏中有多个按钮组件，用作应用程序的导航。我希望所选选项卡的按钮具有实心填充而不是轮廓，因此我使用了以下 html：

<ion-tab-button #tab1 tab="home" href="/tabs/(home:home)">
  <ion-button class="button-tab" fill="{{toggleState1}}" shape="round">
    <ion-icon name="home"></ion-icon>
  </ion-button>
</ion-tab-button>

对于以下选项卡，此操作会再重复两次。

以及随附的 page.ts （所有内容均在上面导入和声明）：

public highlightTab(myTabs) {
this.mainTabs.getSelected().then(data => {
  let selectedTab = data;
  console.log(selectedTab.id);
  if (selectedTab.id = "tab-view-home") {
    this.toggleState1 = "solid";
    this.toggleState2 = "outline";
    this.toggleState3 = "outline";
  }
  else if (selectedTab.id = "tab-view-about") {
    this.toggleState1 = "outline";
    this.toggleState2 = "solid";
    this.toggleState3 = "outline";
  }
  else if (selectedTab.id = "tab-view-contact") {
    this.toggleState1 = "outline";
    this.toggleState2 = "outline";
    this.toggleState3 = "solid";
  }
});

通过一些实验，我发现这个脚本实际上做了我想要它做的所有事情（即使它不是我写过的最漂亮的代码）。唯一的问题是，在以任何组合更改切换状态变量后，按钮实际上不会更新。我在以前版本的 ionic 中找到了几种执行此操作的方法（使用 NgZone 或现已弃用的 ViewController），但我尚未找到适用于 ionic v4 的解决方案。如果有人知道如何强制单个组件重绘，或者甚至知道不需要强制重绘的更改按钮填充状态的替代方法，请告诉我。

Answer 1

也许您正在更新角度区域之外的属性。简单来说：有一些场景 Angular 无法检测到变化。

为了确保 Angular 检测到更改，请将修改属性的逻辑放入其中zone.run()：

constructor(private zone:NgZone) {  
}

public highlightTab(myTabs) {
    this.mainTabs.getSelected().then(data => {
      this.zone.run(() => { 
          let selectedTab = data;
          console.log(selectedTab.id);
          if (selectedTab.id = "tab-view-home") {
            this.toggleState1 = "solid";
            this.toggleState2 = "outline";
            this.toggleState3 = "outline";
          }
          else if (selectedTab.id = "tab-view-about") {
            this.toggleState1 = "outline";
            this.toggleState2 = "solid";
            this.toggleState3 = "outline";
          }
          else if (selectedTab.id = "tab-view-contact") {
            this.toggleState1 = "outline";
            this.toggleState2 = "outline";
            this.toggleState3 = "solid";
          }
        });
    });
}