动态更改离子模式的导航栏颜色

Question

我想根据事件颜色更改导航栏颜色。所以，每次我点击事件时，它都会打开，颜色=主要的模式。但是，我想将其更改为针对此事件的特定内容。我可以在 Ionic 中这样做吗？

  <ion-navbar color="primary">
    <ion-buttons start>
      <button ion-button icon-only (click)="cancel()">
        <ion-icon name="close"></ion-icon>
      </button>
    </ion-buttons>
    <ion-title>Activity Details</ion-title>
  </ion-navbar> 

我尝试在颜色中输入一些变量，但它们被 ionic 忽略了。

<ion-navbar class="toolbar toolbar-md toolbar-md-#f53d3d" ng-reflect-color="#f53d3d"><div class="toolbar-background toolbar-background-md" ng-reflect-klass="toolbar-background" ng-reflect-ng-class="toolbar-background-md"></div><button class="back-button bar-button bar-button-md back-button-md bar-button-default bar-button-default-md" ion-button="bar-button" ng-reflect-klass="back-button" ng-reflect-ng-class="back-button-md"><span class="button-inner"><ion-icon class="back-button-icon icon icon-md back-button-icon-md ion-md-arrow-back" role="img" ng-reflect-klass="back-button-icon" ng-reflect-ng-class="back-button-icon-md" aria-label="arrow back" ng-reflect-name="md-arrow-back"></ion-icon><span class="back-button-text back-button-text-md" ng-reflect-klass="back-button-text" ng-reflect-ng-class="back-button-text-md"></span></span><div class="button-effect"></div></button><ion-buttons start="" class="bar-buttons bar-buttons-md">

Answer 1

添加这将在您的屏幕加载时在运行时改变您的颜色

<ion-navbar [color]="navbar_color">
    <ion-buttons start>
      <button ion-button icon-only (click)="cancel()">
        <ion-icon name="close"></ion-icon>
      </button>
    </ion-buttons>
    <ion-title>Activity Details</ion-title>
  </ion-navbar> 

并将其添加到 .ts 文件中

navbar_color: string;
  ionViewDidLoad() {

    this.navbar_color="<YourColor>";

  }

希望这适用于导航栏中的动态颜色。