Question

尝试在应用程序中打开垫对话框时遇到问题。奇怪的是，对话框没有从路由器出口加载的登录组件中打开：

<div class="main-page">
  <div class="header-eco"  *ngIf="resources.user" >
    <eco-header [FormHeader]="'ECO - ' + formHeader"></eco-header>
  </div>
  <button (click)="openDialogTest()"></button>
  <div class="form-container">
      <router-outlet ></router-outlet>
  </div>


  <div class="footer-c"  *ngIf="resources.user" >
    <eco-footer
      [ShowNavPrev]="CanNavBack()"
      [ShowNavNext]="CanNavNext()"
      [prev]="prevPage"
      [next]="nextPage"
      [showAddButton]="ShowAddButton()"
      [disableSaveButton]="DisableSaveButton()"
      [disableAddButton]="DisableAddButton()"
      [showSaveButton]="ShowSaveButton()"
      (SubmitForm)="SubmitForm($event)"
      (AddNewRow)="AddNewRow($event)"
    ></eco-footer>
  </div>

当我调用相同的代码时，它通过“ openDialogTest”而不是我的登录组件运行。打开对话框，我使用以下代码：

export class LoginComponent implements OnInit {


  constructor(private http:CommunicationServieService,  private dialog: MatDialog){}

  ForgotPassword(){
    console.log("open")
    const dialogConfig = new MatDialogConfig();
    dialogConfig.autoFocus = true;
    const dialogRef = this.dialog.open(ForgotPasswordDialogComponent, dialogConfig);
  }

我的appModule：

import { ForgotPasswordDialogComponent } from './Dialogs/forgot-password-dialog/forgot-password-dialog.component';

@NgModule({
  declarations: [
    AppComponent,
...
 ForgotPasswordDialogComponent,
    ChangePasswordDialogComponent],
  entryComponents:[BaseDialogComponent,ForgotPasswordDialogComponent,ChangePasswordDialogComponent]

编辑

我添加了一些控制台日志，以确保该函数被调用并且可以。

我的LoginComponent HTML：

    <div>
        <a href="#" (click)="ForgotPassword()" class="txt1">
            Forgot Password?
        </a>
    </div>

我的登录组件ts：

ForgotPassword(){
    console.log("open")
    const dialogConfig = new MatDialogConfig();
    dialogConfig.autoFocus = true;
    const dialogRef = this.dialog.open(ForgotPasswordDialogComponent, dialogConfig);
  }

有什么建议吗？

Angular 6 Mat-Dialog无法从路由器出口打开

0 个答案: