如何动态创建一个具有Ionic 2特定类的模态？

嗨，我一直在困难几天了，迄今为止没有研究证明是足够的。我试图用特定的类（或id）在离子2中创建一个简单的模式。如何动态创建一个具有Ionic 2特定类的模态？

我需要这样简单的东西：

<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视图，以便使用本地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' })

不幸的是，我的愿望没有实现:)。

有谁知道如何做到这一点？

来源

2016-12-05 Consta Gorgan

你可以尝试选择添加到您的组件

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

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

somemodal { 
    // dostuff 
}

来源

2016-12-05 15:13:53 misha130

哦，我的上帝！这样一个简单的解决方案，但很难找到...谢谢先生！问题消失了！作为任何可能在将来遇到此问题的人的提示： **您可能需要对元素的CSS属性使用！important关键字**（其中大多数关键字被其他Ionic组件的CSS覆盖） –

您现在可以通过一个CSS类名作为创建模态时的可选参数。

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

找到的官方文档here

来源

2017-09-07 10:56:23 99tharun

如何动态创建一个具有Ionic 2特定类的模态？

回答

相关问题