Angular11 如何显示来自另一个组件的模态组件
How to display modal Component from another Component in Angular 11
我正在尝试显示来自另一个主要组件的模态组件,但当模态组件呈现父组件时,我收到来自模态组件的 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',
});
}
}
如何正确显示另一个主要组件的模态组件?
仅在服务中声明的属性不会注入其中。我认为您应该通过构造函数注入 ngmodal 服务,而不是声明为属性
constructor(modalService: NgbModal) {}
当您尝试打开模式而不是尝试传递对对象的引用时,您还应该直接传递 ExamplePortfolioComponent,我认为它接收一种组件而不是对其实例的引用。
还要检查你是否将你的服务作为提供者注入到任何模块中,我认为你应该声明这样的范围
@Injectable({
providedIn: 'root'
})
export class PortfolioService
我正在尝试显示来自另一个主要组件的模态组件,但当模态组件呈现父组件时,我收到来自模态组件的 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',
});
}
}
如何正确显示另一个主要组件的模态组件?
仅在服务中声明的属性不会注入其中。我认为您应该通过构造函数注入 ngmodal 服务,而不是声明为属性
constructor(modalService: NgbModal) {}
当您尝试打开模式而不是尝试传递对对象的引用时,您还应该直接传递 ExamplePortfolioComponent,我认为它接收一种组件而不是对其实例的引用。 还要检查你是否将你的服务作为提供者注入到任何模块中,我认为你应该声明这样的范围
@Injectable({
providedIn: 'root'
})
export class PortfolioService