使用 Angular TypeScript 添加弹出窗口

Adding a Popup Window with Angular TypeScript

提问by Jesse James

Basically, I would like for a Popup window to appear when I click on this button:

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

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

To do this, I used the following example.

为此，我使用了以下示例。

Here's how I applied the example to my app:

以下是我如何将示例应用于我的应用程序：

This is my popup HTML code:

这是我的弹出 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>

Here's it's typescript file view-one-challenge.component.ts:

这是打字稿文件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() {
  }

}

And here's the typescript file of the component where I want the popup to appear chalist.component.ts:

这是我希望弹出窗口出现的组件的打字稿文件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';
  }

}

The method that should open the popup once a user clicks on the button is open(), and the button in question is this one:

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

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

However, when I run the app and clicks on the link that contains the button, i get the following error in my browser's console:

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

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

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

The example that I'm following clearly states that:

我正在遵循的示例明确指出：

You can pass an existing component as content of the modal window. In this case remember to add content component as an entryComponents section of your NgModule.

您可以将现有组件作为模式窗口的内容传递。在这种情况下，请记住将内容组件添加为 NgModule 的 entryComponents 部分。

So what I did was, I added the ViewChallengeComponentas an entrypoint to my @NgModulein my chalist.component.tsfile, still that didn't solve the problem.

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

Could anyone please tell me what am I doing wrong here?

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

回答by Vinod Bhavnani

Your ngbModal should be provided in the providers.

您的 ngbModal 应该在提供者中提供。

Change your code to this in chalist.component.ts

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

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

If you want to use this module throughout your application, then it is better that you provide it in app.module.ts

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

You have to import it and supply it in the providers list. So instead of doing it in chalist.component.tsor any other component individually, you can provide it globally so that all components under app.module can use it.

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