Блог

Я пытаюсь отобразить модальный компонент из другого основного компонента, но я получаю ошибку 404 от модального компонента, когда он отображает родительский компонент. Я думаю, что beacuse пытается получить доступ к модальному компоненту из основного компонента до его загрузки.

Я объявил модальный компонент в объявлениях NgModule. Я много чего перепробовал, но пока у меня ничего не получалось…

Это мой родительский компонент portfolio.component.html

 ` lt;button class="btn btn-outline-primary"(click)="viewModal()"gt;  View portfolio n. 1  lt;/buttongt;`  

Затем в 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',  });  } }  

Как я могу правильно отобразить модальный компонент из другого основного компонента?

Атрибуты, объявленные только внутри службы, в нее не вводятся. Я думаю, что вы должны внедрить службу ngmodal через конструктор, а не объявлять как атрибут

 constructor(modalService: NgbModal) {}  

Вы также должны передавать ExamplePortfolioComponent напрямую при попытке открыть модальный вместо того, чтобы пытаться передать ссылку на объект, я думаю, что он получает тип компонента, а не ссылку на его экземпляр. Также проверьте, вводите ли вы свои услуги в качестве поставщиков внутри любого модуля, я думаю, вам следует объявить с такой областью действия

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