Q&A
実現したいこと
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内で問題があるのではないかと考えてますが、解決方法が分からず質問させていただきました。
回答1件
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
2023/03/22 09:03