使用 Angular TypeScript 添加弹出窗口

Question

基本上，我希望在单击此按钮时出现一个弹出窗口：

 <a (click)="open()" class='btn btn-primary m-r-5px'>
 <span class='glyphicon glyphicon-eye-open'></span> View
 </a>

为此，我使用了following example。

这是我将示例应用到我的应用程序的方式：

这是我的弹出式 HTML 代码：

<div class="modal-header">
<h4 class="modal-title">Challenge Details</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">
    <!-- HTML table for displaying a challenge details -->
    <table class='table table-hover table-responsive table-bordered'>

        <tr>
            <td class="w-40-pct">Name</td>
            <td>{{challenge?.name}}</td>
        </tr>

        <tr>
            <td>Duration</td>
            <td>&#36;{{challenge?.duration}}</td>
        </tr>

        <tr>
            <td>Description</td>
            <td>{{challenge?.description}}</td>
        </tr>

        <tr>
            <td>Quiz</td>
            <td>{{challenge?.Quiz.title}}</td>
        </tr>

    </table>
</div>
    <div class="modal-footer">
  <button type="button" class="btn btn-outline-dark" (click)="activeModal.close('Close click')">Close</button>
</div>

这是打字稿文件view-one-challenge.component.ts：

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

@Component({
  selector: 'app-view-one-challenge',
  templateUrl: './view-one-challenge.component.html',
  styleUrls: ['./view-one-challenge.component.css']
})
export class ViewOneChallengeComponent implements OnInit {
  @Input() name;
  @Input() duration;
  @Input() description;
  @Input() title;
  constructor(public activeModal: NgbActiveModal) { }

  ngOnInit() {
  }

}

这是我希望弹出窗口出现的组件的打字稿文件chalist.component.ts：

import {Component, OnInit, Output, EventEmitter, NgModule} from '@angular/core';
import {Challenge} from '../../_models/challenge';
import { Quiz } from '../../_models/quiz';
import {User} from '../../_models/user';
import {ChallengeService} from '../../_services/challenge.service';
import {BrowserModule} from '@angular/platform-browser';
import {CommonModule, Location} from '@angular/common';
import {AlertService} from '../../_services';
import { QuizService } from '../../_services/quiz.service';
import { ViewOneChallengeComponent } from '../view-one-challenge/view-one-challenge.component';
import {FormGroup, FormBuilder, Validators} from '@angular/forms';
import {ActivatedRoute, Params, Router} from '@angular/router';
import { NgbModal, NgbModule } from '@ng-bootstrap/ng-bootstrap';


@Component({
  selector: 'app-chalist',
  templateUrl: './chalist.component.html',
  styleUrls: ['./chalist.component.css'],
  providers: [ChallengeService, QuizService],

})

  @NgModule({
  entryComponents: [ViewOneChallengeComponent]
  })

export class ChalistComponent implements OnInit {
  challenge_list: Array<Challenge>;
  challenge: Challenge;
  create_challenge_form: FormGroup;
  show_create_challenge_html=false;
  quizzes: Array<Quiz>;

  constructor(
    private challengeService: ChallengeService,
    private alertService: AlertService,
    private route: ActivatedRoute,
    private router: Router,
    formBuilder: FormBuilder,
    private _location: Location,
    private modalService: NgbModal) {

  }

  ngOnInit() {
    console.log("inside ngOnInit...");
    this.challengeService.getChallenges().subscribe(
      data => {
        this.challenge_list = data;
        this.alertService.success('Récupération des challenges OK', true);

      },
      error => {
        this.alertService.error(error);
      });

  }


  viewChallenge(id: number) {
    if (id > 0) {
      this.challengeService.getChallengeById(id).subscribe(
        data => {
          this.challenge = data;
        },
        error => {
          this.alertService.error(error);
        });
    }
  }

    // user clicks 'create' button
createChallenge(){

    this.show_create_challenge_html = !this.show_create_challenge_html;
}

  readOneChallenge(id) {}
  updateChallenge(id) {}
  deleteChallenge(id) {}

    open() {
    const modalRef = this.modalService.open(ViewOneChallengeComponent);
    modalRef.componentInstance.name = 'World';
  }

}

用户点击按钮后应该打开弹出窗口的方法是open()，而有问题的按钮是这个：

 <a (click)="open()" class='btn btn-primary m-r-5px'>
 <span class='glyphicon glyphicon-eye-open'></span> View
 </a>

但是，当我运行应用程序并单击包含该按钮的链接时，我在浏览器的控制台中收到以下错误：

"StaticInjectorError(AppModule)[ChalistComponent -> NgbModal]: \n StaticInjectorError(Platform: core)[ChalistComponent -> NgbModal]: \n NullInjectorError: No provider for NgbModal!"

我所遵循的示例清楚地表明：

你可以通过 现有组件作为模式窗口的内容。在这种情况下 记得添加内容组件作为 entryComponents 部分 你的 NgModule。

所以我所做的是，我将ViewChallengeComponent 作为入口点添加到我的@NgModule 文件中的chalist.component.ts 中，但这仍然没有解决问题。

谁能告诉我我在这里做错了什么？

Answer 1

您的 ngbModal 应在提供程序中提供。

在chalist.component.ts中将您的代码更改为此

@Component({
  selector: 'app-chalist',
  templateUrl: './chalist.component.html',
  styleUrls: ['./chalist.component.css'],
  providers: [ChallengeService, QuizService, NgbModal],
})

如果你想在整个应用程序中使用这个模块，那么最好在 app.module.ts 中提供它

您必须将其导入并在提供者列表中提供。所以不用单独在chalist.component.ts 或任何其他组件中做它，你可以全局提供它，以便 app.module 下的所有组件都可以使用它。