如何將 angular 模態附加到按鈕單擊

Question

在 web 應用程序開發中給出我的第一個 go，我使用 angular。 我在 src/app 下有一個“add-team-member-dialog.component.ts 和關聯的 html、css 和 spec.ts 文件。我有一個按鈕，我想打開這個模式，這樣我就可以得到用戶輸入文本。我如何獲得該功能？下面是按鈕所在的主頁。

      </div>
  <div class="buttons">
    <button name="addTeamMembers" type="button" class="btn btn-default" data-toggle="modal" data-target="#myModal">Add Team Members</button>
    <button name="addRequirements" style="float:right;" class="btn btn-default" onclick="myFunction2()">Add Requirements</button>
    <!-- <button mat-button class="btn btn-default" (click)="myFunction($event)">Basic</button> -->
    <p id="saved"></p>
</div>

下面是 add-team-member-dialog.component.ts 文件

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

@Component({
selector: 'app-add-team-member-dialog',
templateUrl: './add-team-member-dialog.component.html',
styleUrls: ['./add-team-member-dialog.component.css']
})
export class AddTeamMemberDialogComponent implements OnInit {

 constructor() { }

 ngOnInit() {
    }

 }

下面是 app.component 的 TS 文件

  import { Component } from '@angular/core';
  import { AddTeamMemberDialogComponent } from './add-team-member-dialog/add-team- 
 member-dialog.component';

 @Component({ 
 selector: 'app-root',
 templateUrl: './app.component.html'
 })
 export class AppComponent { 
 form: any;
 projects: string[];
 submitted: boolean = false;
 teamMemberModal: boolean = false;

  constructor() {
  }

   ngOnInit() {
   this.projects = ['Project 1', 'Project 2'];
  }

   onSubmit(form: any)  {
   this.submitted = true;
   // this.teamMemberModal = false;
   this.form = form;
 }

  onShowModal()  {
  this.submitted = false;
  this.teamMemberModal = true;
  //this.form = form;
  }
}

Answer 1

最簡單的方法是創建一個 modal 作為組件，然后將其附加到主頁並添加一個ngIf指令：

<app-modal *ngIf="condition"></app-modal>

那么你必須添加一個方法來切換到 TypeScript class：

toggleModal(e) {return !e} 

並將此方法附加到按鈕。

此方法可以以與模態類似的方式重用。

Answer 2

看起來您正在使用 Angular 材料 - 此資源應該可以幫助您入門： https://material.angular.io/components/dialog/overview

在您的組件中：

  constructor(private dialog: MatDialog) { }

  openTaskDialog() {
    /* 
      Creates your dialog modal
    */
    const dialogRef = this.dialog.open(YourDialogComponent);

    /* 
      Handles what happens after the modal dialog is closed
    */
    dialogRef.afterClosed().subscribe(result => {
      if (result) {
        // do something
      }
    });
  }

在模板中：

<button mat-stroked-button (click)="openTaskDialog()"> Open me </button>

重要的是，您需要創建YourDialogComponent 。 一個簡單的例子是：

import { Component } from '@angular/core';
import { MatDialogRef } from '@angular/material/dialog';

@Component({
  selector: 'app-your-task-dialog',
  template: `
    <h2>Insert your name here:</h2>
    <input type="text">
    <button (click)="onClose()">Cancel</button>
  `,
  styleUrls: []
})
export class YourDialogComponent {

  constructor(public dialogRef: MatDialogRef<YourDialogComponent>) { }

  onClose(): void {
    this.dialogRef.close();
  }
}