• はてなアカウントでログイン
• 無料ユーザー登録

ベストアンサー

• OTTii2018/12/22 23:40:27

  満足100pt

  面白そうだったので、サンプルコードを作って公開しておきました。
  
  https://github.com/masa-ottii/angular7-ngbootstrap-dialog-sample
  
  なにか質問があれば、引き続き受け付けます。

  スター

  • 

    17件のコメントを見る

  • くじぇ 2018/12/25 16:23:27

    OTTiさん早速サンプルコードありがとうございます。
    　
    現状の進捗を返答します。
    　
    OTTiさんのコードを早速自分のコードに組み込んでいるのですが、引き続きエラーが出てダイアログが表示されませんでした。
    そこで https://bit.ly/2BE0epj を参考に、ngAfterViewInit内にsetTimeoutを入れてその中にopen()を入れたところダイアログが表示されるようになりました。
    　
    しかしながら、今度はSaveボタンからダイアログを閉じようとしたところ該当HTML行 modal.close('Save click') にて TypeError: Cannot read property 'close' of undefined がでて試行錯誤しています。
    　
    そこで一度OTTiさんのコードを動かす状態にして詳細を調べようかどうか…と悩んでいたところです。
    　
    この返答だけではなんのことやらわからないと思いますが、コードは安易に出せないのでうまく説明できずすみません。

    スター

  • OTTii 2018/12/25 20:50:31

    > Cannot read property 'close' of undefined
    
    この場合、modalが未定義だというエラーなので、
    
    > 該当HTML行 modal.close('Save click')
    
    このHTMLテンプレートを使っているコンポーネントにmodalというプロパティはありますでしょうか？
    

    スター

  • くじぇ 2018/12/25 21:08:39

    返答ありがとうございます
    
    質問に対し質問で返すことになり申し訳ないのですが、OTTiさんの my-dialog.component.ts ではどこでmodalプロパティを定義しているのでしょうか？
    
    見つからないので、htmlファイル上で最初に「<ng-template #dialog let-modal>」を入れればmodalプロパティが定義されるのか？と考えていました。
    
    あと、OTTiさんの angular7-ngbootstrap-dialog-sample-master について node_modules をコピーして ng serve --open --port 4201 したところ、以下のエラーが出て動かず悩んでいます。
    
    ERROR Error: StaticInjectorError(AppModule)[NgbModal -> NgbModalStack]:
    StaticInjectorError(Platform: core)[NgbModal -> NgbModalStack]:
    NullInjectorError: No provider for NgbModalStack!
    at NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get (core.js:3207)
    at resolveToken (core.js:3452)
    at tryResolveToken (core.js:3396)
    at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:3293)
    at resolveToken (core.js:3452)
    at tryResolveToken (core.js:3396)
    at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:3293)
    at resolveNgModuleDep (core.js:19763)
    at _createClass (core.js:19812)
    at _createProviderInstance (core.js:19780)
    
    VM1055:37 TypeError: Converting circular structure to JSON
    at JSON.stringify (<anonymous>)
    at console.window.console.error (<anonymous>:39:101)
    at Object.View_AppComponent_0 (AppComponent.html:6)
    at Object.proxyClass [as factory] (compiler.js:17945)
    at DebugContext_.push../node_modules/@angular/core/fesm5/core.js.DebugContext_.logError (core.js:22708)
    at ErrorHandler.push../node_modules/@angular/core/fesm5/core.js.ErrorHandler.handleError (core.js:14624)
    at core.js:16706
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:388)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.run (zone.js:138)
    at NgZone.push../node_modules/@angular/core/fesm5/core.js.NgZone.runOutsideAngular (core.js:16094)
    
    質問ばかりで恐縮ですが、よろしくお願いします。

    スター

  • OTTii 2018/12/25 22:59:06

    let-modalという記述で、このテンプレートを利用しているクラス（NgbModal）から開いた状態のモーダルダイアログのオブジェクトが渡されているようです。
    
    ↓こちらとかわかりやすいかも？
    https://qiita.com/hedrall/items/b05eb45eb1a50b3436a9
    
    
    >ERROR Error: StaticInjectorError(AppModule)[NgbModal -> NgbModalStack]:
    
    コピーしたnode_modulesが不完全なんですかね？
    
    angular7-ngbootstrap-dialog-sample-masterフォルダの中で
    npm install
    して新たに依存モジュールを全部ダウンロードしてくるわけにいかないでしょうか？

    スター

  • OTTii 2018/12/25 23:12:56

    もう少し補足
    
    let-modalという風に特に代入されるプロパティを指定していない場合は
    
    $implicit
    
    というプロパティ名を暗黙の名前にしてオブジェクトを渡してきます。
    下記のソースコード内で”$implicit”で検索するとModalのオブジェクトを入れてるぽいのが見れます。
    
    node_modules/@ng-bootstrap/ng-bootstrap/fesm2015/ng-bootstrap.js

    スター

  • くじぇ 2018/12/26 20:10:33

    OTTiiさん、お世話になっております
    
    > angular7-ngbootstrap-dialog-sample-masterフォルダの中で
    > npm install
    > して新たに依存モジュールを全部ダウンロードしてくるわけにいかないでしょうか？
    
    npm install したら、サンプルプログラムは動作しました。
    これです！考えていた通りの動作です。
    なぜ自分の方はだめなのか、もう少し考えてみますorz

    スター

  • くじぇ 2018/12/26 21:54:03

    自分のプログラムにおける component.ts について
    
    this.modalService.open(content,
    を
    this.modalRef = this.modalService.open(content,
    に変更し
    
    component.htmlについて
    <ng-template #content let-modal>
    ↓
    <ng-template #content let-modalRef>
    
    modal.close('dialog')
    ↓
    modalRef.close('dialog')
    
    に直せばプロパティがきちんと伝わってcloseできるかと思ったのですが、改善していないようです。
    
    〇〇Component.html:15 ERROR TypeError: Cannot read property 'close' of undefined
    at Object.eval [as handleEvent] (〇〇Component.html:15)
    at handleEvent (core.js:21652)
    at callWithDebugContext (core.js:22746)
    at Object.debugHandleEvent [as handleEvent] (core.js:22449)
    at dispatchEvent (core.js:19101)
    at core.js:19548
    at HTMLButtonElement.<anonymous> (platform-browser.js:993)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:16126)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)

    スター

  • OTTii 2018/12/27 10:28:08

    表示されたモーダルのオブジェクトはng-bootstrapの中で持ち回ってくれてるので、前半部分のコーディングはサンプルのままでいいはずです。
    
    > Cannot read property 'close' of undefined
    
    原因はなんなんでしょうね？
    ソースコード全体を見れるとわかるのかもしれないですが・・・。
    なんかちょっとした事なような気がします・・・
    例えば〇〇Component.htmlの15行目より前にmodalという変数を別に宣言してたりしないですよね？

    スター

  • くじぇ 2018/12/27 13:25:02

    OTTiiさんひきつづきありがとうございます。
    
    > 例えば〇〇Component.htmlの15行目より前にmodalという変数を別に宣言してたりしないですよね？
    
    いや、検索を使っていましたが、宣言は見つかりませんでした。
    今まで細かくコードを見直していましたが、この辺のコンポーネント類についてフォルダごと一度削除して作り直したほうが案外解決の近道かもしれないと考えています。

    スター

  • OTTii 2018/12/27 14:58:37

    あと考えうるのが、
    <ng-template #content let-modal>
    
    </ng-template>
    とやっている「外側」で
    modal.close('dialog')
    とやっていたりとかはどうでしょう？
    
    let-modalで用意されるmodalという変数は、let-modalが記述されているng-template要素内でのみ有効ですので。

    スター

  • くじぇ 2018/12/27 17:22:18

    OTTiiさん返答ありがとうございます。
    
    外側にボタンをおいて動作させてみたところ、エラーの行数以外は同じエラーが出ました。
    何らかの理由でmodalプロパティの読み取りに失敗しているのは確かなのですが、なぜかはわからないのは相変わらずです。
    今日はいろいろありましてまだ作り直しは試していないので、これからやってみるところです。
    
    ERROR TypeError: Cannot read property 'close' of undefined
    at Object.eval [as handleEvent] (〇〇Component.html:19)
    at handleEvent (core.js:21652)
    at callWithDebugContext (core.js:22746)
    at Object.debugHandleEvent [as handleEvent] (core.js:22449)
    at dispatchEvent (core.js:19101)
    at core.js:19548
    at HTMLButtonElement.<anonymous> (platform-browser.js:993)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:16126)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)

    スター

  • くじぇ 2018/12/27 18:43:18

    作り直すに当たり、今回は仕様にそうよう修正していたポイントを、ほぼOTTiiさんのコードを写経してみましたが、Saveボタンを押したらまたエラーが出てきました。
    
    出たエラーは
    ERROR TypeError: Cannot read property 'close' of undefined
    at Object.eval [as handleEvent] 的なものです。
    
    何がまずいのか…。

    スター

  • くじぇ 2018/12/27 18:56:24

    〇●.component.ts の中身はこんな感じです。
    
    import { Component, OnInit, ViewChild } from '@angular/core';
    import { NgbModal, ModalDismissReasons } from '@ng-bootstrap/ng-bootstrap';
    
    @Component({
    selector: 'app-config-〇●-insert',
    templateUrl: './insert.component.html',
    styleUrls: ['./insert.component.scss']
    })
    export class 〇●InsertComponent implements OnInit {
    
    @ViewChild('content') dialogTemplate: Element;
    
    closeResult: string;
    
    constructor(private modalService: NgbModal) {}
    
    ngOnInit() {
    this.closeResult = "";
    }
    
    ngAfterViewInit(): void {
    setTimeout(() => {
    this.open(this.dialogTemplate);
    });
    }
    
    open(content) {
    this.modalService.open(content, {ariaLabelledBy: 'modal-basic-title'}).result.then(
    (result) => {
    this.closeResult = `Closed with: ${result}`;
    }, (reason) => {
    this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
    }
    );
    }
    
    private getDismissReason(reason: any): string {
    if(reason === ModalDismissReasons.ESC) {
    return 'by pressing ESC';
    } else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
    return 'by clicking on a backdrop';
    } else {
    return `with: ${reason}`;
    }
    }
    }

    スター

  • くじぇ 2018/12/27 19:00:16

    〇●.component.html の中身はこんな感じです。
    ※ソースコードそのまま上げたら表記がおかしくなったので、全角に直しました。
    
    ＜ｎｇ－ｔｅｍｐｌａｔｅ　＃ｃｏｎｔｅｎｔ　ｌｅｔ－ｍｏｄａｌ＞
    　　＜ｄｉｖ　ｃｌａｓｓ＝”ｍｏｄａｌ－ｈｅａｄｅｒ”＞
    　　　　＜ｈ４　ｃｌａｓｓ＝”ｍｏｄａｌ－ｔｉｔｌｅ”　ｉｄ＝”ｍｏｄａｌ－ｂａｓｉｃ－ｔｉｔｌｅ”＞Ｐｒｏｆｉｌｅ　ｕｐｄａｔｅ＜／ｈ４＞
    　　　　＜ｂｕｔｔｏｎ　ｔｙｐｅ＝”ｂｕｔｔｏｎ”　ｃｌａｓｓ＝”ｃｌｏｓｅ”　ａｒｉａ－ｌａｂｅｌ＝”Ｃｌｏｓｅ”　（ｃｌｉｃｋ）＝”ｍｏｄａｌ．ｄｉｓｍｉｓｓ（’Ｃｒｏｓｓ　ｃｌｉｃｋ’）”＞
    　　　　　　＜ｓｐａｎ　ａｒｉａ－ｈｉｄｄｅｎ＝”ｔｒｕｅ”＞＆ｔｉｍｅｓ；＜／ｓｐａｎ＞
    　　　　＜／ｂｕｔｔｏｎ＞
    　　＜／ｄｉｖ＞
    　　＜ｄｉｖ　ｃｌａｓｓ＝”ｍｏｄａｌ－ｂｏｄｙ”＞
    　　　　＜ｆｏｒｍ＞
    　　　　　　＜ｄｉｖ　ｃｌａｓｓ＝”ｆｒｏｍ－ｇｒｏｕｐ”＞
    　　　　　　　　＜ｌａｂｅｌ　ｆｏｒ＝”ｄａｔｅＯｆＢｉｒｔｈ”＞Ｄａｔｅ　ｏｆ　ｂｉｒｔｈ＜／ｌａｂｅｌ＞
    　　　　　　　　＜ｄｉｖ　ｃｌａｓｓ＝”ｉｎｐｕｔ－ｇｒｏｕｐ”＞
    　　　　　　　　　　＜ｉｎｐｕｔ　ｉｄ＝”ｄａｔｅＯｆＢｉｒｔｈ”　ｃｌａｓｓ＝”ｆｏｒｍ－ｃｏｎｔｒｏｌ”　ｐｌａｃｅｈｏｌｄｅｒ＝”ｙｙｙｙ－ｍｍ－ｄｄ”　ｎａｍｅ＝”ｄｐ”　ｎｇｂＤａｔｅｐｉｃｋｅｒ　＃ｄｐ＝”ｎｇｂＤａｔｅｐｉｃｋｅｒ”＞
    　　　　　　　　　　＜ｄｉｖ　ｃｌａｓｓ＝”ｉｎｐｕｔ－ｇｒｏｕｐ－ａｐｐｅｎｄ”＞
    　　　　　　　　　　　　＜ｂｕｔｔｏｎ　ｃｌａｓｓ＝”ｂｔｎ　ｂｔｎ－ｏｕｔｌｉｎｅ－ｓｅｃｏｎｄａｒｙ　ｃａｌｅｎｄａｒ”　（ｃｌｉｃｋ）＝”ｄｐ．ｔｏｇｇｌｅ（）”　ｔｙｐｅ＝”ｂｕｔｔｏｎ”＞＜／ｂｕｔｔｏｎ＞
    　　　　　　　　　　＜／ｄｉｖ＞
    　　　　　　　　＜／ｄｉｖ＞
    　　　　　　＜／ｄｉｖ＞
    　　　　＜／ｆｏｒｍ＞
    　　＜／ｄｉｖ＞
    　　＜ｄｉｖ　ｃｌａｓｓ＝”ｍｏｄａｌ－ｆｏｏｔｅｒ”＞
    　　　　＜ｂｕｔｔｏｎ　ｔｙｐｅ＝”ｂｕｔｔｏｎ”　ｃｌａｓｓ＝”ｂｔｎ　ｂｔｎ－ｏｕｔｌｉｎｅ－ｄａｒｋ”　（ｃｌｉｃｋ）＝”ｍｏｄａｌ．ｃｌｏｓｅ（’Ｓａｖｅ　ｃｌｉｃｋ’）”＞Ｓａｖｅ＜／ｂｕｔｔｏｎ＞
    　　＜／ｄｉｖ＞
    ＜／ｎｇ－ｔｅｍｐｌａｔｅ＞
    ＜ｐｒｅ＞｛｛ｃｌｏｓｅＲｅｓｕｌｔ｝｝＜／ｐｒｅ＞

    スター

  • くじぇ 2018/12/27 19:16:58

    なお、『＜ｂｕｔｔｏｎ　ｔｙｐｅ＝”ｂｕｔｔｏｎ”　ｃｌａｓｓ＝”ｃｌｏｓｅ”　ａｒｉａ－ｌａｂｅｌ＝”Ｃｌｏｓｅ”　（ｃｌｉｃｋ）＝”ｍｏｄａｌ．ｄｉｓｍｉｓｓ（’Ｃｒｏｓｓ　ｃｌｉｃｋ’）”＞』について。
    今まで仕様に合わせて削っていたのでテストしていませんでしたが、今回試してみたところ、やはりmodalつながりでエラーが出ました。
    
    ERROR TypeError: Cannot read property 'dismiss' of undefined
    at Object.eval [as handleEvent] (〇●Component.html:4)
    at handleEvent (core.js:21652)
    at callWithDebugContext (core.js:22746)
    at Object.debugHandleEvent [as handleEvent] (core.js:22449)
    at dispatchEvent (core.js:19101)
    at core.js:19548
    at HTMLButtonElement.<anonymous> (platform-browser.js:993)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:16126)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)

    スター

  • くじぇ 2018/12/27 20:02:58

    その後、
    http://blog.yuhiisk.com/archive/2018/05/04/update-angular-to-v6.html
    を参考に、同上のソースにおいて、angularのアンインストールと再インストールをやってみたらmodal関係のエラーが出なくなり、モーダル上の操作によって×を押したときもsaveを押したときも{{closeResult}}の値が変わるようになりました。
    
    自分のオリジナルコードの方でも、Angularのインストールでおかしなところがあったのかもしれません。
    とりあえず、OTTiiさんの内容から仕様の内容へカスタマイズをさせていただきます。
    ありがとうございました。
    
    以下参考：問題解決のためコマンドプロンプトから実施したコマンド
    
    npm install -g @angular/cli@latest
    
    ng update @angular/cli
    
    ng update @angular/core
    
    ng update @angular/material
    ※Package not installed: "@angular/material". Skipping.と返されたので、多分不要
    
    npm install -g rxjs-tslint
    
    rxjs-5-to-6-migrate -p src/tsconfig.app.json
    ※Cannot find any possible migrations　と出たので、多分不要
    
    npm uninstall rxjs-compat
    ※コマンド実行後、○×.component.ts の @Component({なんとか}); について急にエラー出だしたので、多分不要
    
    npm install -g rxjs-tslint
    
    ng serve --open

    スター

  • OTTii 2018/12/27 20:46:25

    問題は解決したということですかね。
    お疲れ様でした。よかったです。

    スター

その他の回答

この質問へのコメント

質問の情報

登録日時

2018-12-21 21:42:13

終了日時

2018-12-26 20:10:57

回答条件

1人1回まで

この質問のカテゴリ

• コンピュータ
• ウェブ制作

人気の質問

• いつも大変お世話になっています。 アスペルガー精神3級独身会社員34歳男です。 最近心身共に疲れがもの凄…hayakushinene12日前
• https://hikky-mura.org/t/topic/2523/7 でsma200さんという方に戸塚ヨットスクールを勧められましたが、僕…hayakushinene12日前
• 親族（実家）の犬が無駄吠えをしています。朝方に一時間くらい吠えているらしい。昼にも一時間くらい吠え続…匿名質問者2215日前
• 度々すみません。 私は以前から大学入試・成績など教育関連のネガティブな夢を見ていましたが、ここ最近そ…hayakushinene153日前
• 学歴詐称ではなくて、貴族称号詐称について伺います。イボンヌの香りという映画で、ロシアの伯爵を詐称して…匿名質問者4日前

メニュー

• 質問一覧
• カテゴリ一覧
• 無料ユーザー登録
• 人力検索はてなトップ

PC版

• お問い合わせ
• ヘルプ
• お知らせ
• はてなトップ