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下的所有组件都可以使用它。

使用Angular TypeScript添加弹出窗口

1 个答案: