首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何关闭angular 7中另一个组件的模式?

在Angular 7中关闭另一个组件的模态框,可以通过以下步骤实现:

  1. 在父组件中创建一个布尔类型的变量,用于控制模态框的显示与隐藏。例如,可以在父组件的.ts文件中声明一个变量isModalOpen: boolean = false;
  2. 在父组件的模板文件(.html)中,使用条件语句来控制模态框的显示与隐藏。例如,可以使用*ngIf指令来判断isModalOpen变量的值,如果为true,则显示模态框。
代码语言:txt
复制
<app-modal *ngIf="isModalOpen"></app-modal>
  1. 在子组件中,通过使用@Output装饰器和事件触发器,将关闭模态框的操作传递给父组件。在子组件的.ts文件中,声明一个@Output属性和一个触发关闭模态框的方法。
代码语言:txt
复制
import { Component, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-modal',
  template: `
    <!-- 模态框内容 -->
    <div class="modal">
      <!-- 模态框关闭按钮 -->
      <button (click)="closeModal()">关闭</button>
    </div>
  `,
})
export class ModalComponent {
  @Output() closeModalEvent = new EventEmitter();

  closeModal() {
    this.closeModalEvent.emit();
  }
}
  1. 在父组件的.ts文件中,监听子组件触发的关闭模态框事件,并在事件处理程序中将isModalOpen变量设置为false,从而关闭模态框。
代码语言:txt
复制
import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  template: `
    <!-- 父组件内容 -->
    <button (click)="openModal()">打开模态框</button>
    <app-modal (closeModalEvent)="closeModal()"></app-modal>
  `,
})
export class ParentComponent {
  isModalOpen: boolean = false;

  openModal() {
    this.isModalOpen = true;
  }

  closeModal() {
    this.isModalOpen = false;
  }
}

通过以上步骤,当点击父组件中的"打开模态框"按钮时,模态框将显示出来。而在模态框中点击"关闭"按钮时,将触发子组件的关闭模态框事件,并通过父组件的事件处理程序将isModalOpen变量设置为false,从而关闭模态框。

请注意,以上示例中的组件名称和选择器仅供参考,实际应根据项目需求进行调整。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • 领券