Question

这是我在HTML页面中使用的代码。在我的角度模块中，我导入了所有相关内容。但由于背景，总是说这个错误。请帮忙。我不知道这个背景。如果有人可以解释一下这个错误是什么以及为什么会这样？

<div class="animated fadeIn">
      <div class="row">
        <div class="col-lg-12">
          <div class="card">
            <div class="card-header">
              <i class="fa fa-align-justify"></i> Bootstrap Modals
            </div>
            <div class="card-block">
              <!-- Button trigger modal -->
              <button type="button" class="btn btn-secondary" data-toggle="modal" (click)="smallModal.show()">
        Launch small modal
      </button>
            </div>
          </div>
        </div>
        <!--/.col-->
      </div>
      <!--/.row-->
    </div>

    <div bsModal #smallModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h4 class="modal-title">Modal title</h4>
            <button type="button" class="close" (click)="smallModal.hide()" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
          </div>
          <div class="modal-body">
            <p>One fine body&hellip;</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" (click)="smallModal.hide()">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
        <!-- /.modal-content -->
      </div>
      <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->

这是我的.ts文件

import { Component, OnInit, ViewChild } from '@angular/core';
import { ModalDirective } from 'ng2-bootstrap/modal/modal.component';

@Component({
  selector: 'app-mso-user-profile',
  templateUrl: './mso-user-profile.component.html',
  styleUrls: ['./mso-user-profile.component.css']
})
export class MsoUserProfileComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

Answer 1

导入此类：

// RECOMMENDED
import { ModalModule } from 'ngx-bootstrap/modal';
// or
import { ModalModule } from 'ngx-bootstrap';

@NgModule({
  imports: [ModalModule.forRoot(),...]
})
export class AppModule(){}

Answer 2

如果您尝试通过工厂动态加载组件，如下所示：

const factory = this.resolver.resolveComponentFactory(YOURModalComponent);
const componentRef = this.fileAttacherContainer.createComponent(factory);
const component = componentRef.instance;

您必须等到工厂解析器完成组件创建之后，我的意思是当组件尚未创建时，然后初始化未调用的ngx-bootstrap背景幕，例如，如果您调用show modal如下所示，一切顺利：

setTimeout(() => {
    component.show();
}, 2000); //any millisecond

但是，不要忘记这是一个不好的解决方案，但是我告诉您更好的理解。

最后，好的解决方案是使用Promises或直接在子组件的component.show();中调用ngAfterViewInit。

另外，请阅读此文章： https://angular.io/api/core/AfterViewChecked

无法读取未定义的属性“背景”

2 个答案: