Ionic2:使用 getActive() 更改活动页面的按钮颜色

Question

我有一个在 4 个页面上使用的导航组件，我希望能够在导航组件中更改活动页面按钮的颜色。在 Ionic 应用程序文档中的导航控制器中，我找到了 getActive(( 实例，但我无法弄清楚如何使用它获得所需的结果。我使用以下代码推送到新视图。

viewPage2(){
 this.navCtrl.push(Page2);
}
<button ion-button (click)="viewPage2()" color="dark" clear full>Page 2</button>

Answer 1

NavController getActive()返回"活动"页的ViewController。查看ViewController的 API，您可以尝试使用 getContentRef() ：

this.navCtrl.getActive().contentRef().nativeElement.getElementById("button_id")

一旦你有了元素，你可以改变颜色。

Answer 2

尽管通过

id 获取 html 元素可能会起作用，但直接修改 DOM 并不是在 Ionic 中做事的推荐方法。

---

第一个选项：

如果这是一个自定义组件，则始终可以在该组件中公开公共方法，并使用ViewChild

@Component({...})
export class NavCustomComponent {
    public activePage: string = 'page1';
    //...
    public changeActivePage(pageName: string): void {
        this.activePage = pageName;
    }
    // ...
}

在您看来：

<button ion-button (click)="viewPage2()" [color]="activePage === 'page2' ? 'light' : 'dark'" clear full>Page 2</button>

然后在您尝试修改组件的页面中：

@Component({...})
export class DemoPage {
    @ViewChild(NavCustomComponent) navCustomComponent: NavCustomComponent;
}

然后使用该引用调用该公共方法：

this.navCustomComponent.changeActivePage('page2');

---

第二种选择：

如果这不是自定义组件，或者您只是想让事情变得更简单，您可以只使用事件。无论您在何处定义该 nav 组件的代码(或在 app.component.ts 文件中使其对整个应用进行全局(，请订阅该事件：

public activePage: string = 'page1';
constructor(public events: Events, ...) {
    events.subscribe('page:selected', (pageName) => {
        this.activePage = pageName;
    });
}

再次，在您看来：

<button ion-button (click)="viewPage2()" [color]="activePage === 'page2' ? 'light' : 'dark'" clear full>Page 2</button>

然后在要更改颜色的组件中，只需发布该事件：

events.publish('page:selected', 'page2');