0

需要在按钮单击时创建一个模态弹出窗口，有没有办法从头开始制作它而不添加任何额外的依赖项，使用下面的方法，我得到了功能齐全的模态，但不确定这是否是一个好方法是否有角度，请建议

HTML

<button class="hl-sort" (click)="openSortingModal()">
Sort
</button>
<div class="modal-container" *ngIf="modalContent">
  <h1>i am modal content</h1>
  <button (click)="closeModal()">Close</button>
</div>

组件.ts

modalContent = false;
openSortingModal(){
  this.modalContent = true;
  console.log('clicked')
}
closeModal(){
 this.modalContent = false;
}
4

4 回答 4

2

如果您不想添加任何额外的依赖项，我建议您使用 HTML + CSS 创建一个可重用的组件，如下所示：

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'app-modal',
  template: `
    <div #myModal class="container">
    <div class="content">
      <p>Some content here...</p>
      <button (click)="close()">Close</button>
    </div>
    </div>
  `,
  styleUrls: ['./modal.component.css']
})
export class ModalComponent {

  @ViewChild('myModal', {static: false}) modal: ElementRef;

  open() {
    this.modal.nativeElement.style.display = 'block';
  }

  close() {
    this.modal.nativeElement.style.display = 'none';
  }
}

然后在你的容器中使用它：

import { Component, ViewChild } from '@angular/core';
import { ModalComponent } from './modal/modal.component';

@Component({
  selector: 'my-app',
  template: `
    <app-modal #modal></app-modal>
    <p>
    Open a Pure HTML + CSS with Angular
    </p>
    <button (click)="openModal()">Open Modal</button>
  `,
  styleUrls: []
})
export class AppComponent  {

  @ViewChild('modal', {static: false}) modal: ModalComponent

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

在此处查看一个工作示例：https ://stackblitz.com/edit/angular-modal-html-css

我希望它有帮助！

于 2020-01-09T05:21:15.827 回答
1

好吧，如果您想“重新发明轮子”，请不要忘记在单击外部时关闭模态

改进 Luixaviles 的答案，组件模式可以像

<div #myModal class="container" (click)="tryClose()">
  <div #content class="content">
    <ng-content></ng-content>
  </div>
</div>

好吧，你看到我做了一个函数“tryClose”，如果你点击 div “myModal”，这个函数检查我们是否点击，但我们没有点击里面的“内容”

  tryClose() {
    const clickTarget = event.target as HTMLElement;
    if (!(this.content.nativeElement as HTMLElement).contains(clickTarget))
      this.close();
  }

使用<ng-content>允许我们在 app.component 中写一些类似

<app-modal #modal>
    <p>Some content here...</p>
    <button (click)="modal.close()">Close</button>
</app-modal>
<p>
   Open a Pure HTML + CSS with Angular
</p>
<button (click)="modal.open()">Open Modal</button>

模态组件中的其余代码很简单：

export class ModalComponent {
  @ViewChild("myModal", { static: false }) modal: ElementRef;
  @ViewChild("content", { static: false }) content: ElementRef;

  open() {
    this.modal.nativeElement.style.display = "block";
  }

  close() {
    this.modal.nativeElement.style.display = "none";
  }
}

查看Luixaviles 的分叉堆栈闪电战

更新一个简单的 stopPropagation 让思考更轻松

   <div #myModal class="container" (click)="close()">
      <div (click)="$event.stopPropagation()" class="content">
        <ng-content></ng-content>
      </div>
    </div>
于 2020-01-09T08:16:43.727 回答
1

如果你不想重新发明轮子，你可以使用这个

https://ng-bootstrap.github.io/#/components/modal/examples

于 2020-01-09T05:09:26.550 回答
0

显然，创建自己的组件而不是使用第三方是个好主意。只需确保您的弹出窗口必须是可重用或动态弹出窗口。

于 2020-01-09T06:13:22.483 回答