gpt4 book ai didi

angular - 如何以 Angular 从一个组件打开模态到另一个组件?

转载 作者:行者123 更新时间:2023-12-03 23:36:38 25 4
gpt4 key购买 nike

我创建模态模态组件并在 modal.component.html 文件中编码我的模态。我想在我的 header.component.html 文件中的 header 组件中使用这个模式。

我的 header.component.html 的相关部分如下:

<div style="text-align: center">
<a class="social-account-profile icon-plus"
(click)="onButtonClick()"</a>
</div>
onButtonClick是我的 header.component.ts 中的一个方法,如下所示:
export class HeaderComponent implements OnInit {

constructor(public router: Router, public authService: AuthService,
public appGlobal: AppGlobals, public modal: ModalComponent) {
}

ngOnInit() {
}

onButtonClick() {
this.modal.openModal();
}

}
openModal在我的 modal.component.ts 文件中的方法如下:
export class ModalComponent implements OnInit {

@ViewChild('projctModal') projctModal: any;
openModal() {
this.projctModal.show();
}

constructor(private formvalidation: FormValidation) {
}

ngOnInit() {
}

}

我的 modal.component.html 文件如下:
<div mdbModal #projctModal="mdbModal" class="modal fade top " id="projctModal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel"
aria-hidden="true">
</div>

当我运行代码时,我在 chrome 控制台中收到此错误:
ERROR TypeError: Cannot read property 'show' of undefined

我怎样才能解决这个问题 ?

最佳答案

您需要创建一个模态服务以使其在下面的示例示例中工作。

模态组件

import { Component, ElementRef, Input, OnInit,ViewChild, OnDestroy } from '@angular/core';
import {ModalService} from './modal.service';

@Component({
selector: 'app-modal',
templateUrl: './modal.component.html'
})
export class ModalComponent implements OnInit, OnDestroy {
@Input() id: string;
private element: any;
@ViewChild('basicModal') basicModal: ElementRef;


constructor(private modalService: ModalService, private el: ElementRef) {
this.element = el.nativeElement;
}

ngOnInit(): void {
let modal = this;

// ensure id attribute exists
if (!this.id) {
console.error('modal must have an id');
return;
}
// add self (this modal instance) to the modal service so it's accessible from controllers
this.modalService.add(this);
}

// remove self from modal service when directive is destroyed
ngOnDestroy(): void {
this.modalService.remove(this.id);
this.element.remove();
}

// open modal
open(): void {
this.basicModal.show();
}

// close modal
close(): void {
this.basicModal.hide()
}


}

它是 html
<div mdbModal #basicModal="mdbModal" class="modal fade right" tabindex="-1" role="dialog" aria-labelledby="myBasicModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-full-height modal-right" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title w-100" id="myModalLabel">Modal title</h4>

<button type="button" class="close pull-right" aria-label="Close" (click)="basicModal.hide()">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<ng-content></ng-content>
</div>
<div class="modal-footer">
<button type="button" mdbBtn color="secondary" class="waves-light" aria-label="Close" (click)="basicModal.hide()" mdbWavesEffect>Close</button>
<button type="button" mdbBtn color="primary" class="relative waves-light" mdbWavesEffect>Save!</button>
</div>
</div>
</div>
</div>

模态服务代码如下
import { Injectable } from '@angular/core';

@Injectable()
export class ModalService {

private modals: any[] = [];

add(modal: any) {
this.modals.push(modal);
}

remove(id: string) {
this.modals = this.modals.filter(x => x.id !== id);
}

open(id: string) {
let modal: any = this.modals.filter(x => x.id === id)[0];
modal.open();
}

close(id: string) {
let modal: any = this.modals.filter(x => x.id === id)[0];
modal.close();
}

}

并且在您的实际组件中像这样使用它
import { Component } from '@angular/core';

import {ModalService} from './modal/modal.service';

@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
private bodyText: string;

constructor(private modalService: ModalService) {
}

ngOnInit() {
this.bodyText = 'This text can be updated in modal 1';
}

openModal(id: string) {
this.modalService.open(id);
}

closeModal(id: string) {
this.modalService.close(id);
}


}

和它的 html
<div class="col-md-6 col-md-offset-3">
<h1>Home</h1>
<p>{{bodyText}}</p>
<button (click)="openModal('custom-modal-1')">Open Modal 1</button>
<button (click)="openModal('custom-modal-2')">Open Modal 2</button>

</div>


<app-modal id="custom-modal-1">
<h1>A Custom Modal!</h1>
<p>Home page text: <input type="text" [(ngModel)]="bodyText" /></p>
<button (click)="closeModal('custom-modal-1');">Close</button>
</app-modal>

<app-modal id="custom-modal-2">
<h1>A Custom Modal!</h1>

</app-modal>

关于angular - 如何以 Angular 从一个组件打开模态到另一个组件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53049100/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com