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');

第二个选项：

如果这不是自定义组件，或者您只是想让事情变得更简单，那么您可以Events。无论您何时定义该导航组件的代码（或在您的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');

Ionic2：使用getActive（）更改活动页面的按钮颜色

2 个答案: