web-dev-qa-db-ja.com

Angular2 ng-bootstrapモーダルコンポーネント

私は モーダルコンポーネントng-bootstrap with follow（body）だけで作成されています：

<template #content let-c="close" let-d="dismiss">
    <div class="modal-body">
        <p>Modal body</p>
    </div>
</template>

そして、それはangular 2 component

import { Component } from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';

@Component({
    selector: 'my-hello-home-modal',
    templateUrl: './hellohome.modal.html'
})

export class HelloHomeModalComponent {
    closeResult: string;

    constructor(private modal: NgbModal) {}

    open(content) {
        this.modal.open(content).result.then((result) => {
            this.closeResult = `Closed with: ${result}`;
        }, (reason) => {
            console.log(reason);
        });
    }
}

私はこのモーダルを自分のWebサイトの他のコンポーネントから呼び出すことができるようにしたいです。 homeComponentからopenメソッドを呼び出すだけです

homeComponentを参照

import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'my-home',
    templateUrl: './home.component.html'
})

export class HomeComponent implements OnInit {
    constructor() {
    }

    ngOnInit() {
        console.log('Hello Home');

        /** want call modal popin here from the init component method in order to test the modal. **/

    }
}

誰かが私にそれを行う方法を説明できますか？私はangular 1.xから来ました、それはとても簡単でした...

angularbootstrap-modalng-bootstrap
7
user7339839

Angular 5とng-bootstrapを使用してこれを行う方法です。次のようにモーダルコンポーネントを作成します。

import { Component, OnInit } from '@angular/core';
import {NgbActiveModal} from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'sm-create-asset-modal',
  templateUrl: './create-asset-modal.component.html',
  styleUrls: ['./create-asset-modal.component.css']
})
export class CreateAssetModalComponent implements OnInit {

  constructor(public activeModal: NgbActiveModal) { }

  ngOnInit() {
  }
}

テンプレートは次のようになります。

<div class="modal-header">
  <h4 class="modal-title">Create New </h4>
  <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
    <span aria-hidden="true">&times;</span>
  </button>
</div>
<div class="modal-body">
  <p>One fine body&hellip;</p>
</div>
<div class="modal-footer">
  <button type="button" class="btn btn-success" (click)="activeModal.close('Close click')">Create</button>
</div>

からモーダルを開きたいコンポーネントで、NgbModal型の変数を追加し、次のようにopenを呼び出します。

export class MyComponent {
  constructor(private modal: NgbModal) {}

  onClick() {
    this.modal.open(CreateAssetModalComponent);
  }

}

CreateAssetModalComponentが宣言されているNgModuleで、次のようにentryComponents配列にコンポーネントを追加します。

@NgModule({
  imports: [...],
  declarations: [CreateAssetModalComponent],
  entryComponents: [CreateAssetModalComponent]
})

NgbModuleのような他のモジュールがインポートされていると仮定すると、これは機能するはずです。

19
Bright Dodo

私は完全にあなたが何をしようとしているのか理解していませんが、本質的には非常に簡単です特定のcontentを持つモーダルウィンドウでは、openサービスでNgbModalメソッドを呼び出すだけです。 simplest可能な実装は、ワンライナー（this.modalService.open('Hi tehre!');）です：

_@Component({
  selector: 'my-home',
  templateUrl: 'src/modal-basic.html'
})
export class HomeComponent implements OnInit {
  constructor(private modalService: NgbModal) {}

  ngOnInit(content) {
    this.modalService.open('Hi tehre!');
  }
}
_

Plunkerでライブで見る： http://plnkr.co/edit/5qq04Q4HFLOe9tsyeMMI?p=preview

AngularJS 1.xのangle-ui/bootstrapと同じexactlyです！原則はまったく同じで、何も変わっていません。

mightが頭痛の種となるのは、モーダルのcontentを指定する方法です。上記の例では文字列を使用していますが、ほとんどの場合、バインディングやディレクティブなどでHTMLを使用したいと考えています。ただし、Angularは、HTMLコンパイラを本番環境に出荷したくない（そして、これを本当にしたくない...）。

したがって、次に最適なオプションは、anotherコンポーネントをコンテンツとして使用することです。ここに最小限の例を示します。 http://plnkr.co/edit/EJyZ6nF5WVAS9bvQycQe?p=preview

注：Angular自体のバグのため、現在open()をラップする必要がありますsetTimeoutを使用したメソッド呼び出しバグリファレンス： https://github.com/angular/angular/issues/15634

2
pkozlowski.opensource

コンストラクタパラメータにHelloHomeModalComponentを追加し、HomeComponentからopen関数を次のように呼び出します。

_import { Component, OnInit } from '@angular/core';
import { HelloHomeModalComponent } from "hello-home-modal.component";

@Component({
    selector: 'my-home',
    templateUrl: './home.component.html'
})

export class HomeComponent implements OnInit {
    constructor(private modal: HelloHomeModalComponent) {}

    ngOnInit() {
        this.modal.open();
    }
}
_

@ViewRef（）を使用してモーダルコンポーネントから適切なテンプレート参照を取得する場合、contentパラメーターをコンポーネントのopen()に渡す必要はありません。

1
K3v1n