Question

我在我的项目中插入了一个Angular Material的模态，当我单击关闭按钮时，我想关闭它，它将被隐藏。有可能的？我能够做的关闭很简单，但隐藏我做不到。有人可以帮我吗？

遵循my-dialog.component.ts：

import {Component, OnInit, Inject} from '@angular/core';
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material';
import {MatCheckboxModule} from '@angular/material/checkbox';
import * as $ from 'jquery';


@Component({
  selector: 'app-my-dialog',
  templateUrl: './my-dialog.component.html',
  styleUrls: ['./my-dialog.component.css']
})
export class MyDialogComponent implements OnInit {


  constructor(
    public dialogRef: MatDialogRef<MyDialogComponent>,
    @Inject(MAT_DIALOG_DATA) public data: any) {}
  

  ngOnInit() {
    $('.enter,.buy').on('click',function(e){
      event.preventDefault();
    });
  }

  save(e){
    e.preventDefault();
    this.dialogRef.close("IT WAS SAVED");
  }
  

}

和我的header.component.ts：

import { Component, OnInit } from '@angular/core';
import * as $ from 'jquery';
import { Output, EventEmitter } from '@angular/core';
import {MatDialog} from '@angular/material';
import { MyDialogComponent } from '../my-dialog/my-dialog.component';
import { DialogTestComponent } from '../dialog-test/dialog-test.component';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {

  constructor(public dialog: MatDialog) {}

  @Output() buttonClick = new EventEmitter()
  enable:boolean = true;

  displayBanner(){
    this.enable = this.enable == false ? true : false;
    this.buttonClick.emit(this.enable);
  }


  ngOnInit() {
    $(document).ready(function(){
      $(document).on('mouseenter', '.menu li', function() {
        $(this).children('ul').stop(true,true).slideDown(150);
      });
      $(document).on('mouseleave', '.menu li', function() {
        $(this).children('ul').stop(true,true).slideUp(150);
      });
      $(document).on('click', '.list-courses',function(){
        $('.default').fadeOut(function(){
          $('.courses').fadeIn();
        });
      });
      $(document).on('click', '.list-plans', function(){
        $('.default').fadeOut(function(){
          $('.plans').fadeIn();
        });
      });
      $(document).on('click','.list-my',function(){
        $('.default').fadeOut(function(){
          $('.my').fadeIn();
        });
      });
      $('.back-courses').on('click', function(){
        $('.courses').fadeOut(function(){
          $('.default').fadeIn();
        });
      });
      $('.back-plans').on('click',function(){
        $('.plans').fadeOut(function(){
          $('.default').fadeIn();
        });
      });
      $('.back-my').on('click',function(){
        $('.my').fadeOut(function(){
          $('.default').fadeIn();
        });
      });

      $('.mobile-menu, .courses li, .plans li').on('click',function(){
        $('.mobile-menu').toggleClass('actived');
        $('.panel').slideToggle();
        if($('.courses').is(':visible')){
          $('.courses').fadeOut(function(){
            $('.default').fadeIn();
          });
        } if($('.plans').is(':visible')) {
          $('.plans').fadeOut(function(){
            $('.default').fadeIn();
          });
        }
      });
    });
  }

  showItem = true;

  openDialog(): void {
    const dialogRef = this.dialog.open(MyDialogComponent, {
      width: '360px',
    });

    dialogRef.afterClosed().subscribe(result => {
      console.log('The dialog was closed');
      console.log(result);
      //this.buttonClick.emit(this.enable=false);
      this.displayBanner () 
      this.showItem = false;
    });
  }

  openDialog2(): void {
    const dialogRef2 = this.dialog.open(DialogTestComponent, {
      width: '360px',
    });
  }

  getOut(){
    this.displayBanner ()
    this.showItem = true;
  }
  

}

Answer 1

当您执行dialog.close（）时，您可以传递一个值，当您订阅该对话框被关闭时，该值可用作结果。

因此，您可以做的是添加另一个参数，在您要隐藏标语并关闭对话框时，为其提供一个值。如果您不给它一个值，则只想关闭对话框即可。

所以您的保存方法可能如下所示：

        <li ng-repeat="provider in model.externalProviders">
            <a class="pure-button button-{{provider.type}}" href="{{provider.href}}"><i class="fab fa-{{provider.type}}"></i>{{provider.text}}</a>
        </li>

然后在您的afterclose方法中执行以下操作：

save(e, hideBanner?) {
   e.preventDefault();
   const flag = (hideBanner) ? true : false;
   this.dialogRef.close(flag);
}

我还没有测试这种行为，但是它应该可以给您一些接近预期结果的结果

隐藏Angular 7中的模态组件

1 个答案: