如何在Angular 11中显示来自另一个组件的模态组件

Question

我正在尝试显示来自另一个主组件的模态组件，但在呈现父组件时我收到来自模态组件的 404 错误。 我认为是因为试图在加载之前从主组件访问模态组件。

我在 NgModule 声明中声明了模态组件。 尝试了很多东西，但我还不能让它工作......

这是我的父组件portfolio.component.html

`  <button class="btn btn-outline-primary"(click)="viewModal()">
      View portfolio n. 1
   </button>`

然后在portfolio.component.ts中

import { PortfolioService } from './portfolio.service';
@Component({
  selector: 'app-portfolio',
  templateUrl: './portfolio.component.html',
  styleUrls: ['./portfolio.component.scss'],
})
export class PortfolioComponent implements AfterViewInit {
   //declare service to render the data from another component
   constructor(private portfolioService: PortfolioService) {}
    
ngAfterViewInit() {}

viewModal() {
    this.portfolioService.displayPortfolio();
  }
}

终于在portfolio.service.ts上

import { Injectable } from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { ExamplePortfolioComponent } from './portfolios-list/example-portfolio.template.component';
@Injectable()
export class PortfolioService {
  examplePortfolio: ExamplePortfolioComponent;
  modalService: NgbModal;

  constructor() {}
  // here I'm trying to display the modal, but it doesn't work
  displayPortfolio() {
    this.modalService.open(this.examplePortfolio, {
      windowClass: 'dark-modal',
    });
  }
}

如何正确显示来自另一个主要组件的模态组件？

Answer 1

仅在服务中声明的属性不会注入其中。我认为您应该通过构造函数注入 ngmodal 服务，而不是声明为属性

constructor(modalService: NgbModal) {}

当您尝试打开模式而不是尝试传递对对象的引用时，您还应该直接传递 ExamplePortfolioComponent，我认为它接收一种组件类型而不是对其实例的引用。 还要检查你是否将你的服务作为提供者注入到任何模块中，我认为你应该用这样的范围声明

@Injectable({
    providedIn: 'root'
})
export class PortfolioService