web-dev-qa-db-ja.com

ngx-bootstrap modalServiceを使用するときにカスタムクラスを追加する方法

ngx-bootstrapsource code を参照する場合：

modal-options.class.ts

class propertyとして定義されるオプションのclass?: string;があります。

それを使用する方法は何ですか？

次のようなカスタムクラスを追加することは可能ですか？

this.modalService.config.class = 'myClass';

例としてサービスを使用する前に：

this.modalRef = this.modalService.show(template, {
  animated: false
});

このように、表示されたモーダルにカスタムCSSを追加できると思います

成功せずにカスタムクラスを追加しようとしました。

そのクラスプロパティは配列ではありません（該当する場合）。追加できるカスタムクラスは1つだけですか？

デモ：modalクラスを追加およびオーバーライドすることにより、モーダルは表示されません

https://stackblitz.com/edit/ngx-bootstrap-3auk5l?file=app%2Fapp.component.ts

modalクラスをこの方法で追加しても役に立ちません：

this.modalRef = this.modalService.show(template, Object.assign({},
                this.config, { class: 'gray modal-lg modal' }));

https://stackblitz.com/edit/ngx-bootstrap-awmkrc?file=app%2Fapp.component.ts

cssangularngx-bootstrapngx-bootstrap-modal
11
HDJEMAI

Ngx-bootstrap documentation Modalコンポーネントについて（componentタブを参照）によると、classメンバーを構成オブジェクト。

Important：モーダル要素はレンダリングされたHTMLのコンポーネント要素の外側にあるため、コンポーネントまたはスタイル属性のCSSカプセル化をオフにする必要がありますクラスが別のファイルで指定され、スタイルがモーダル要素に適用されることを確認する必要があります。

以下のコードスニペットは this stackblitz で実行できます。

import { Component, TemplateRef, ViewEncapsulation } from '@angular/core';
import { BsModalService, BsModalRef } from 'ngx-bootstrap';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class AppComponent {
  modalRef: BsModalRef;
  config = {
    animated: true,
    keyboard: true,
    backdrop: true,
    ignoreBackdropClick: false,
    class: "my-modal"
  };

  constructor(private modalService: BsModalService) { }

  openModal(template: TemplateRef<any>) {
    this.modalRef = this.modalService.show(template, this.config);
  }
}

次のようなCSSファイルを使用します。

.my-modal {
  border: solid 4px blue;
}

.my-modal .modal-header {
  background-color: Lime;
}

.my-modal .modal-body {
  background-color: orange;
}

Update：この other stackblitz は、外部ファイルからstyles.cssにインポートされたCSSスタイルの例を示しています。コンポーネントのCSSカプセル化を維持します。

10
ConnorsFan