如何关闭对话框Angular 9 ngx admin

问题描述

在StackOverflow中找到的解决方案显示了调用ref.close()方法，但在引用中没有名为close的方法。如何关闭此对话框，现在我打电话给ref.destroy()，它正在关闭对话框，但显示的内容过多，如果用户单击该窗口，则它会隐藏。

import { Component,Input,Output,EventEmitter,ComponentRef } from '@angular/core';
import { BlogCaredWithImageText } from '../module/BlogCaredWithImageText.model';
import { NbDialogService,NbDialogRef } from '@nebular/theme';
import { ButtonSettingComponent } from '../button-setting/button-setting.component';
import { TemplateRef } from '@angular/core';

@Component({

    selector: 'blog-item',templateUrl: 'blog-item.component.html',styleUrls: ['blog-item.component.scss']
})
export class BlogItemComponent {
    placeholder = "./assets/millastudio/imageplaceholder/1.png";
    @input() data: BlogCaredWithImageText = new BlogCaredWithImageText();
    @input() fontSize = "6";
    @input() lineHeight = 1;
    @input() margin = "0.5px";
    @input() makePreview = false;
    @Output() mouseLeave: EventEmitter<void> = new EventEmitter();
    @Output() mouseEnter: EventEmitter<void> = new EventEmitter();
    @Output() editMe: EventEmitter<void> = new EventEmitter();

    showEditButton = false;
    editMeUpdate() {
        this.editMe.emit();
    } @Output() deleteMe: EventEmitter<void> = new EventEmitter();

    deleteMeUpdate() {
        this.deleteMe.emit();
    }
    @input() enableMouseEnter = true;
    ///  if (this.enableMouseEnter == true)
    constructor( private dialogService: NbDialogService){

    }
    mouseLeaveUpdate() { 
        if (this.enableMouseEnter == true)
            if (this.makePreview == false) {
                this.showEditButton = false;
                console.log("mouseLeave ");
                this.mouseLeave.emit();
            }

    }
    mouseEnterUpdate() {
        if (this.enableMouseEnter == true)
            if (this.makePreview == false) {
                this.showEditButton = true;
                console.log("mouseEnter ");
                this.mouseEnter.emit();
            }
    }
    getimage(): string {

        if (this.data.img[0].includes(".jpg") || this.data.img[0].includes(".png") || this.data.img[0].includes(".webp") || this.data.img[0].includes(".jpeg")) {
            return this.data.img[0];
        }
        else {
            return this.placeholder;
        }

    }

    mouseEnterOnButtonUpdate(index){
        this.data.button[index].showSetting=true;
    }
    
    mouseLeaveOnButtonUpdate(index){
        this.data.button[index].showSetting=false;
    }

    setupButton(index){
          
   let ref :  ComponentRef<ButtonSettingComponent> =  this.dialogService.open(ButtonSettingComponent).componentRef;
  ref.instance.btColor= this.data.button[index].color;
  ref.instance.btAction=   this.data.button[index].action;
  ref.instance.btContent=     this.data.button[index].content;
  ref.instance.buttonText=     this.data.button[index].text;
  ref.instance.removeLisiner.subscribe(()=>{
    this.data.button.splice(index,1);
    ref.destroy();
  });
  ref.instance.close.subscribe(()=>{
    ref.destroy();
    
  });
 
   ref.instance.finish.subscribe(()=>{
        this.data.button[index].color=ref.instance.btColor;
        this.data.button[index].action=ref.instance.btAction;
        this.data.button[index].content=ref.instance.btContent;
        this.data.button[index].text =ref.instance.buttonText;
        alert(this.data.button[index].color);
        ref.destroy();
    });
  
}

}

解决方法

因为您正在尝试关闭ref，所以这不是正确的方法。

throws