Question

我正在我的应用程序上使用MDB组件库（这是我第一次使用此库），在对该库使用模态时，它们的示例是通过单击按钮，模态将显示。我希望能够在ngOnInit()中显示模式，以便在页面加载时 https://mdbootstrap.com/angular/advanced/modals/#liveDemo

HTML

<button type="button" class="btn btn-primary waves-light" (click)="form.show()" mdbWavesEffect>Login with avatar form</button>
<!--Modal: Login with Avatar Form-->
<div mdbModal #form="mdb-modal" class="modal fade" id="modalLoginAvatar" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog cascading-modal modal-avatar modal-sm" role="document">
        <!--Content-->
        <div class="modal-content">

            <!--Header-->
            <div class="modal-header">
                <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20%281%29.jpg" class="rounded-circle img-responsive">
            </div>
            <!--Body-->
            <div class="modal-body text-center mb-1">

                <h5 class="mt-1 mb-2">Room name</h5>

                <div class="md-form ml-0 mr-0">
                    <input mdbInputDirective type="password" type="text" id="form29" class="form-control ml-0">
                    <label for="form29" class="ml-0">Enter password</label>
                </div>

                <div class="text-center">
                    <button class="btn btn-cyan mt-1 waves-light" mdbWavesEffect>Login <i class="fa fa-sign-in ml-1"></i></button>
                </div>
            </div>

        </div>
        <!--/.Content-->
    </div>
</div>

TS .show（）在VSCODE上说：Property 'show' does not exist on type 'ElementRef<any>'.

import { Component, OnInit, ViewChild, ElementRef  } from '@angular/core';
// For MDB Angular Free
import { ModalModule, WavesModule, InputsModule } from 'angular-bootstrap-md'

@Component({
  selector: 'app-roommain',
  templateUrl: './roommain.component.html',
  styleUrls: ['./roommain.component.scss']
})
export class RoommainComponent implements OnInit {
  @ViewChild ('form') public formModal: ElementRef;

  constructor(private modal : ModalModule) { }

  ngOnInit() {
    this.formModal.show();
  }

}

Answer 1

我能够使我的代码正常工作的唯一方法是进行一些黑客操作，我做到了以下几点：

TS

import { Component, OnInit, ViewChild, ElementRef  } from '@angular/core';
import { ModalModule, WavesModule, InputsModule } from 'angular-bootstrap-md'

@Component({
  selector: 'app-roommain',
  templateUrl: './roommain.component.html',
  styleUrls: ['./roommain.component.scss']
})
export class RoommainComponent implements OnInit {
  @ViewChild ('form') public formModal: any;

  constructor(private modal : ModalModule) { }

  ngOnInit() {}

  ngAfterViewInit() {
    this.formModal.show();
  }
}

通过将viewChild设置为“ any”，可以编译任何错误的代码，并且通过调用this.formModal.show();中的ngAfterViewInit()，可以加载页面中的所有组件因此在这种情况下，我可以将它们的特定方法称为.show()

在页面加载时加载MDBootstrap模态

1 个答案: