如何動態創建一個具有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特定類的模態？

回答

相關問題