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

Question

我想根据事件颜色更改导航栏颜色。因此，每次单击事件时，它都会打开，模态为color = primary。但是，我想将其更改为此事件的具体内容。我可以在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> 

我试图在颜色中输入一些变量，但离子会忽略它们。

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

  }

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