页面加载MDBootstrap模式

Question

我在我的应用程序上使用MDB组件库(这是我第一次使用这个库)，同时使用这个库的模式，他们的例子是通过你点击一个按钮，模式将显示。我希望能够在ngOnInit()中显示模式，所以当页面加载https://mdbootstrap.com/angular/advanced/modals/#liveDemo时

<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“，我可以编译带有任何错误的代码，通过调用ngAfterViewInit()中的this.formModal.show();，可以加载页面中的所有组件，以便在本例中调用它们的特定方法-- .show()。