如何在Ionic 2中动态创建具有特定类的模态？ [英] How can I dynamically create a modal with a specific class in Ionic 2?

问题描述

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

Hi I have been stuck with a problem for days now, and so far no research has proved sufficient. I am trying to create a simple modal in Ionic 2 with a specific class (or id).

我需要一些简单的东西：

I need something as simple as this:

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

我试图用角度封装ViewEncapsulation视图/ core为了使用本地css，但是这个css将全局可用（并且我不能仅仅设置这个特定的模式 - 所以这不是解决方案）：

I have tried to encapsulate the view with ViewEncapsulation from angular/core in order to use a local css, but this css will be available globally (and I cannot "style" only this particular modal - so this is not a solution):

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

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

I was hoping to find a simple solution like:

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

不幸的是，我的愿望没有成真:)。

Unfortunately, my wish didn't come true :).

有谁知道怎么做？

推荐答案

您可以尝试为组件添加选择器

You can try to add a selector to your component

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

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

And now you can set all your css on the element somemodal

somemodal {
    // dostuff
}

这篇关于如何在Ionic 2中动态创建具有特定类的模态？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！