Question

我引用下面的链接并尝试执行此操作。但我做不到为我提供帮助。

https://github.com/mdbootstrap/Angular-Bootstrap-with-Material-Design/issues/85

in.component.html

<div mdbModal #frame="mdbModal" class="modal fade left" id="frameModalTop" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
  aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header text-center">
        <h4 class="modal-title w-100 font-weight-bold">Sign in</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="frame.hide()">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body mx-3">
        <div class="md-form mb-5">
          <i class="fa fa-envelope prefix grey-text"></i>
          <input type="email" id="defaultForm-email" [formControl]="loginFormModalEmail" class="form-control validate" mdbInputDirective>
          <label data-error="wrong" data-success="right" for="defaultForm-email">Your email</label>
        </div>

        <div class="md-form mb-4">
          <i class="fa fa-lock prefix grey-text"></i>
          <input type="password" id="defaultForm-pass" [formControl]="loginFormModalPassword" class="form-control validate" mdbInputDirective>
          <label data-error="wrong" data-success="right" for="defaultForm-pass">Your password</label>
        </div>

      </div>
      <div class="modal-footer d-flex justify-content-center">
        <button class="btn btn-default waves-light" mdbWavesEffect>Login</button>
      </div>
    </div>
  </div>
</div>

in.component.ts

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

@Component({   selector: 'app-in',   templateUrl: './in.component.html',   styleUrls: ['./in.component.scss'] }) export class InComponent implements OnInit {


  loginFormModalEmail = new FormControl('', Validators.email);   loginFormModalPassword = new FormControl('', Validators.required);

  constructor() { }

  ngOnInit() {   }

}

header.component.html

<app-in #frame></app-in>
<button class="btn btn-blur" mdbWavesEffect data-toggle="modal" (click)="this.showChildModal()">SIGN IN NOW</button>

header.component.ts

import { MDBBootstrapModule } from 'angular-bootstrap-md';
import { NgSelectModule } from '@ng-select/ng-select';
import { InComponent } from './../sign/in/in.component';
import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { FormControl, Validators } from '@angular/forms';
import { ModalDirective } from 'angular-bootstrap-md';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements OnInit {
  // @ViewChild ('frame') public frame: ElementRef;
  @ViewChild('frame') private frame: ModalDirective;
  myOptions: Array<any> = [
    { label: 'Belgium', value: 'BE' },
    { label: 'Luxembourg', value: 'LU' },
    { label: 'Netherlands', value: 'NL' }
  ];

  constructor() { }

  ngOnInit() {
  }

  public showChildModal():void {
    this.frame.show();
  }
}

我需要in.component模态元素包括header.component按钮并打开模态？

Answer 1

在您的html中，您需要使用frame.show（）方法来使用按钮打开模式。

 <button type="button" class="btn btn-outline-info waves-light" mdbWavesEffect (click)="frame.show()">OPEN MODAL</button>

如何在模型中使用子组件在Angular 6中打开另一个组件？

1 个答案: