angular - 模态弹出窗口不从角度打开

Question

我有一个简单的角度页面，其中显示了开发人员正在处理的项目列表。我有整个后端用 .net core 编写，前端用 angular 8 编写。我可以从 .net core 获取数据并显示项目列表。在同一页面上，我有一个“新建”，以便开发人员可以添加新项目。单击创建新按钮时，我想打开弹出窗口，以便用户可以添加他们正在处理的新项目。一切正常，但是当我单击“创建新”按钮时，什么也没有弹出。不知道我做错了什么。我尝试调试 .ts 文件，但找不到错误。我的整个代码就在这里：

https://stackblitz.com/edit/angular-xsyflg

下面是我试图打开弹出窗口的父窗口（AngularCRUDComponent.ts）的代码：

import { Component, OnInit, ViewChild, ViewChildren } from '@angular/core';
import { ProjectAddComponent } from '../project-add/project-add.component';
import { ProjectDataService } from '../DataService/ProjectDataService';
import { AllItProject } from 'src/Models/allitproject';
import {AcrDivison} from 'src/Models/acrDivison';
import {Appdev} from 'src/Models/appDev';
import {Bsa} from 'src/Models/bsa';
import {ExecutiveSponsor} from 'src/Models/executiveSponsor';
import {ProjectSection} from 'src/Models/projectsection';
import {ProjectStatus} from 'src/Models/projectStatus';
import {ProjectSubType} from 'src/Models/projectSubType';
import {ProjectType} from 'src/Models/projectTypes';
import { Router } from '@angular/router';
import { ProjectUpdateComponent } from '../project-update/project-update.component';
//import { AlertifyService } from '../DataService/alertify.service';
import {
  MatTableModule, MatFormFieldModule, MatInputModule, MatSelectModule, MatCheckboxModule, MatDatepickerModule, MatNativeDateModule,
  MatIconModule, MatAutocompleteModule, MatExpansionModule, MatTabsModule, MatDialogModule, MatTooltipModule, MatRadioModule,
} from '@angular/material';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatSortModule } from '@angular/material/sort';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { Injectable, Inject } from '@angular/core';

@Component({
  selector: 'app-angular-crud',
  templateUrl: './angular-crud.component.html',
  styleUrls: ['./angular-crud.component.css']
})
export class AngularCRUDComponent implements OnInit {


  projectlist: AllItProject[];
  dataavailbale: boolean = false;
  tempproject: AllItProject;

  constructor(private dataservce: ProjectDataService, private route: Router) {

  }
  @ViewChild('projectadd', {static: false}) projectcomponent: ProjectAddComponent;

  ngOnInit() {
    this.LoadProjectData();


  }
LoadProjectData() {

    this.dataservce.getProjectData().subscribe((tempdate) => {
      this.projectlist = tempdate;
      console.log(this.projectlist);
      if (this.projectlist.length > 0) {
        this.dataavailbale = true;

      }

      else {
        this.dataavailbale = false;
      }
     }

    ), err => {
        console.log(err);
      }
  }
loadAddnew() {
this.projectcomponent.objProjectDetails.description = '';
  }

  RefreshData() {
    this.LoadProjectData();
  }


}

我的 angularCRUDComponent.html 文件在下面

<div class="container">
  <input type="button" class="btn btn-primary" (click)="loadAddnew()" data-toggle="modal" data-target="#myModal" value="Create New">
  <hr>
  <div *ngIf="!dataavailbale">

    <h4> NoData is present Click Add new to add Data.</h4>
  </div>


  <table class="table table-striped table-bordered table-sm" cellspacing="0" width="100%" *ngIf="dataavailbale">
    <thead>
      <tr>
      <th scope="th-sm">Description</th>
       </tr>
    </thead>
    <tbody>
      <tr *ngFor="let project of projectlist let i = index ">
        <td scope="col">{{i+1}}</td>
        <td scope="col">{{ project.description }}</td>
</tr>
    </tbody>
  </table>

</div>
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-primary">project Add</h4>
      </div>
      <div class="modal-body">
          <app-project-add #projectadd (nameEvent)="RefreshData($event)"></app-project-add>

      </div>
      <div class="modal-footer">
        <button type="button" #closeBtn class="btn btn-danger" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

我的子 componentproject-add.component.ts 代码如下：

import { Component, OnInit,Input, ViewChild, ElementRef, EventEmitter, Output } from '@angular/core';
import { NgForm } from '@angular/forms';
import { AllItProject } from '../../models/allitproject';
import { Router } from '@angular/router';
import {ProjectDataService} from '../DataService/ProjectDataService';

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

  @Input()  cleardata: boolean = false;
  @Output() nameEvent = new EventEmitter<string>();
  objtempproject: AllItProject;
  @Input() objProjectDetails: AllItProject = new AllItProject();
  @ViewChild('closeBtn', {static: true}) cb: ElementRef;

 constructor(private dataservice: ProjectDataService, private route: Router) {

 }

  ngOnInit() {

  }

  ResetValues(){

  }

Register(regForm: NgForm){

    this.objtempproject = new AllItProject();
    this.objtempproject.name = regForm.value.name;
    this.objtempproject.description = regForm.value.description;

    this.dataservice.AddProjectDetails(this.objtempproject).subscribe(res=> {
      console.log('Project Added successfully');
       this.TakeHome();
}
  );


  }
  TakeHome(){
    this.nameEvent.emit('ccc');
    this.cb.nativeElement.click();
    this.route.navigateByUrl('');
  }

}

我的子组件 project-add.component.html 代码如下：

<div class="container" style="border:thin">

  <form #projectadd='ngForm' (ngSubmit)="Register(projectadd)" class="form-horizontal" style="width:50%"  >

    <div class="form-group" >
      <label class="control-label col-sm-2" for="description">Description:</label>
      <div class="col-sm-10">
        <input #description="ngModel"  style="width:50%" type="description" [(ngModel)]='objProjectDetails.description' class="form-control" width="50%" id="description" placeholder="Enter description" name="description">

      </div>
    </div>
     <div class="form-group">
      <div class="col-sm-offset-2 col-sm-10">
        <button  id="btnsubmit"  type="submit" class="btn btn-primary">Submit</button>
      </div>
    </div>
  </form>
</div>
<button style="display:none" type="button" #closeBtn  class="btn btn-default"   data-dismiss="modal">Close</button>

我的 app-routing.module.ts 文件如下：

import { NgModule, Component } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AngularCRUDComponent } from './angular-crud/ProjectList';
import { ProjectAddComponent} from './project-add/project-add.component';

const routes: Routes = [{path: '', component: AngularCRUDComponent},
{path: 'Add', component: ProjectAddComponent},
{path: 'Home', component: AngularCRUDComponent}
];


@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

当我单击 F12 时，我没有看到任何错误。下面是 F12 和我的网页的图像：

我的整个代码在这里：

https://stackblitz.com/edit/angular-xsyflg

标签： angularangular8

Answer 1

我在你的导入中看到了 MatDialogModule 那么你为什么不使用 MatDialog 这个实现

请参阅下面的代码供您参考。

父组件.ts

import { MatDialog } from '@angular/material/dialog';

constructor(public dialog: MatDialog
) { }


openDialog(): void {
const dialogRef = this.dialog.open(CreateProjectComponent, {
  width: '250px',
   data: {projectname: this.projectname}
});

dialogRef.afterClosed().subscribe(result => {
  console.log('The dialog was closed');     
});

}

父组件.html

<div>
     <a mat-raised-button (click)="openDialog()">Create New</a>
</div>

CreateProject.Component.ts

import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';

export interface DialogData {
projectname: string;
}


export class CreateProjectComponent implements OnInit {
 constructor( public dialogRef: MatDialogRef<CreateProjectComponent>,
           @Inject(MAT_DIALOG_DATA) public data: DialogData) {}

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

ngOnInit() {
}
}

CreateProject.Component.html

<h1 mat-dialog-title>Create New Project</h1>
<div mat-dialog-content>
<mat-form-field>
  <input matInput [(ngModel)]="data.projectname" placeholder="Project Name">
</mat-form-field>
</div>
<div mat-dialog-actions>
   <button mat-button [mat-dialog-close]="data.projectname" 
   cdkFocusInitial>Ok</button>
  <button mat-button (click)="onNoClick()">No Thanks</button>
</div>