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";
  }
});

通过一些实验，我发现该脚本实际上完成了我想要执行的所有操作（即使它不是我编写过的最漂亮的代码）。唯一的麻烦是，以任何组合更改toggleState变量后，按钮实际上都不会更新。我已经在ionic的早期版本中找到了几种方法（使用NgZone或现已弃用的ViewController），但是我还没有找到可以在ionic v4中使用的解决方案。如果有人知道如何强制重绘单个组件，或者甚至不需要强制重绘来更改按钮填充状态的另一种方法，请告诉我。

Answer 1

也许您正在更新角度区域之外的属性。简而言之：在某些情况下，角度检测不到变化。

要确保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";
          }
        });
    });
}

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

1 个答案: