Question

我是第一次使用Web应用程序开发，而即时通讯使用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

最简单的方法是创建一个模态作为组件，然后将其附加到主页并添加一个ngIf指令：

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

然后，您必须添加一个方法以切换到TypeScript类：

toggleModal(e) {return !e}

并将此方法附加到按钮上。

可以以与模式类似的方式重用此方法。

Answer 2

看起来您正在使用Angular Material-此资源应该可以帮助您入门：https://material.angular.io/components/dialog/overview

在您的组件中：

composer install

并在模板中：

  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

如何将角度模态附加到按钮上单击

2 个答案: