如何在 Ionic 2 中动态创建具有特定类的模式？答案

【问题标题】：How can I dynamically create a modal with a specific class in Ionic 2?如何在 Ionic 2 中动态创建具有特定类的模式？
【发布时间】：2016-12-05 14:46:44
【问题描述】：

您好，我已经被一个问题困扰好几天了，到目前为止，还没有任何研究证明是足够的。我正在尝试在 Ionic 2 中创建一个具有特定类（或 id）的简单模式。

我需要这么简单的东西：

<ion-modal class="myDifficultToAddClass">
...
</ion-modal>

这是我的代码：

import { NavParams, ModalController } from 'ionic-angular';
@Component(...)
class PageBehindTheModal {
  constructor(public modalCtrl: ModalController) {

  }
  presentProfileModal() {
    let profileModal = this.modalCtrl.create(Profile, { randomData: randomData });
    profileModal.present();
  }
}

@Component(...)
class Profile {
  constructor(params: NavParams) {
    console.log('Some info: ', params.get('randomData'));
  }
}

我尝试使用 angular/core 中的 ViewEncapsulation 封装视图，以便使用本地 css，但是这个 css 将在全球范围内可用（我不能只“设置”这个特定的模式 - 所以这不是一个解决方案）：

import { ViewEncapsulation } from '@angular/core';
@Component({
  styleUrls: ['./product-details.scss'],
  encapsulation: ViewEncapsulation.Emulated
})

我希望找到一个简单的解决方案，例如：

// create(component, data, opts)
create(Profile, { randomData: randomData }, { cssClass: 'myDifficultToAddClass' })

很遗憾，我的愿望没有实现:)。

有人知道怎么做吗？

【问题讨论】：

标签： javascript angular ionic2

【解决方案1】：

您现在可以在创建模式时将 CSS 类名作为可选参数传递。

  presentProfileModal() {
    let profileModal = this.modalCtrl.create(Profile, { 
      randomData: randomData }, {
      cssClass: 'myDifficultToAddClass'
    });
    profileModal.present();
  }

找到官方文档here

【讨论】：

这应该是正确答案！代表那些懒得浏览文档的人表示感谢。 ://

【解决方案2】：

你可以尝试给你的组件添加一个选择器

@Component({
    templateUrl: 'modal.html',
    selector:'somemodal',
})

现在你可以在 somemodal 元素上设置所有的 CSS

somemodal {
    // dostuff
}

【讨论】：

天哪！如此简单的解决方案，但很难找到......谢谢先生！问题消失了！给以后可能遇到此问题的任何人的提示：您可能需要在元素的 CSS 属性上使用 !important 关键字（其中大部分被其他 Ionic 组件的 CSS 覆盖）