質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.54%
Angular

Angularは、JavaScriptフレームワークです。AngularJSの後継であり、TypeScriptベースで実装されています。機能ごとに実装を分けやすく、コードの見通しが良いコンポーネント指向です。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Q&A

解決済

1回答

830閲覧

【Anuglar】ボタンをクリックしてモーダルを表示させたいが、依存性注入のエラーが発生します。

2001

総合スコア2

Angular

Angularは、JavaScriptフレームワークです。AngularJSの後継であり、TypeScriptベースで実装されています。機能ごとに実装を分けやすく、コードの見通しが良いコンポーネント指向です。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

0グッド

0クリップ

投稿2023/03/18 20:25

実現したいこと

AngularのwebアプリにてBootstrapのModalを実装したいです。
ボタンを配置したページのtsファイルにmodalのservice.tsをインポートしてクリック時にモーダルウィンドウを展開したいです。
初めての質問であるため、不備があれば教えていただけると幸いです。

前提

@angular/cli 15.1.
typescript 4.9.5
"ngx-bootstrap": "^10.2.0",
他に提示すべき情報があればご教授下さい・

発生している問題・エラーメッセージ

Devtoolで以下のエラーメッセージが出力されます。

quiz.component.html:19 ERROR NullInjectorError: R3InjectorError(QuizModule)[ QuizComponent -> QuizComponent -> QuizComponent -> QuizComponent -> QuizComponent]: NullInjectorError: No provider for QuizComponent!

該当のソースコード

このコードがエラーの出る部分になります。

TypeSctipt

1openModal() { 2 this.modalRef = this.bsModal.show(ResultComponent, {}); 3 }

以下conponent.tsファイルです

import { ModalService } from 'src/app/shared/modal/modal.service'; @Component({ selector: 'name-quiz', templateUrl: './quiz.component.html', styleUrls: ['./quiz.component.scss'], providers: [ModalService] }) constructor(private modalService: ModalService, private dataService: DataService, private router: Router){} buttonClick(){ this.modalService.openModal(); }

補足情報(FW/ツールのバージョンなど)

ボタンをクリックしたときにページのモーダルウィンドウ以外が暗転する状態になっており、モーダルウィンドウだけが出てきていないです。
作成したモーダルのservice内で問題があるのではないかと考えてますが、解決方法が分からず質問させていただきました。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

エラーの原因は、QuizComponentがプロバイダとして登録されていないためです。
QuizComponentをproviders配列に追加する必要がありますが、通常、コンポーネント自体をプロバイダとして追加することはありません。
代わりに、ModalServiceをproviders配列に追加することで、QuizComponentでModalServiceが利用できるようになります。

また、QuizComponentのconstructorでModalServiceを受け取る代わりに、BsModalServiceを受け取る必要があります。
これは、ngx-bootstrapモジュールからインポートされるべきです。
そして、openModal()メソッドをQuizComponentに移動し、ResultComponentを表示するように設定します。

以下のように修正してください。

1.QuizComponentのproviders配列からModalServiceを削除してください。
2.ModalServiceの代わりにBsModalServiceをインポートしてください。

import { Component, OnInit } from '@angular/core';
import { DataService } from 'src/app/services/data.service';
import { Router } from '@angular/router';
import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';
import { ResultComponent } from '../result/result.component';

@Component({
selector: 'name-quiz',
templateUrl: './quiz.component.html',
styleUrls: ['./quiz.component.scss']
})
export class QuizComponent implements OnInit {
modalRef: BsModalRef;

constructor(private bsModal: BsModalService, private dataService: DataService, private router: Router) { }

ngOnInit(): void {
}

buttonClick() {
this.openModal();
}

openModal() {
this.modalRef = this.bsModal.show(ResultComponent, {});
}
}
ここで、ModalServiceは削除され、BsModalServiceが使用されるようになりました。
これで、ボタンをクリックすると、ResultComponentがモーダルウィンドウとして表示されるはずです。

この変更を行った後、依然として問題が発生する場合は、ResultComponentの設定やngx-bootstrapのインストールと設定が正しく行われているかを確認してください。

投稿2023/03/19 04:07

quiz

総合スコア258

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

2001

2023/03/22 09:03

とても丁寧な回答ありがとうございます! serviceファイルを作成して間接的に読み込むのではなく直接BsModalserviceを利用するのですね。 無事動作しました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.54%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

同じタグがついた質問を見る

Angular

Angularは、JavaScriptフレームワークです。AngularJSの後継であり、TypeScriptベースで実装されています。機能ごとに実装を分けやすく、コードの見通しが良いコンポーネント指向です。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。