1

我正在使用 Visual Studio 2015 在 Angular2 中构建一个应用程序：主页中有两个按钮，它们都提供相同的弹出窗口。一切都很好，直到我决定为这个模式制作一个单独的组件。所以按钮保持在主页面上，而模式现在在另一个组件中。但现在我得到了错误：无法读取未定义的属性“显示”！在我的表演功能上。这是modal.component.ts：

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

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

  @ViewChild('lgModal') public lgModal:ModalDirective;

  constructor() { }

  ngOnInit() {
  }
  showInfoModal = () => {
    this.lgModal.show();
  };
}

这是modal.component.html：

<div bsModal #lgModal="bs-modal" [config]="{backdrop: 'static'}" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"
  aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h2 class="modal-title pull-left">what is it about?</h2>
        <button type="button" class="close pull-right" (click)="lgModal.hide()" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>content of the window.....</p>
      </div>
     </div>
   </div>
 </div>

主页组件html中的按钮：

<button class="btn-default btn pull-right next" (click)="showModal()"> privacy <i class="fa fa-fw fa-chevron-right"></i></button>

主页组件.ts：

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

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

  constructor(){

  }

  ngOnInit() {
    }

  showModal() {
    this.infoModal.showInfoModal();
  }

有人知道吗？我不知道我在哪里做错了！

4

1 回答 1

2

您应该使用以下内容作为ViewChild参考

@ViewChild(ModalDirective) public lgModal:ModalDirective;

更新 1：基于修改后的问题

您缺少infoModal以下参考，

export class HomeComponent implements OnInit {
@ViewChild(InfoModalComponent)  infoModal : InfoModalComponent; ////// missing declaration

  ngOnInit() {
    }

  showModal() {
    this.infoModal.showInfoModal();
  }

注意：当你使用this.infoModal时，你需要像上面一样声明它，否则你可以在 HTML 本身中使用它们

<button class="btn-default btn pull-right next" (click)="infoModal.showInfoModal()">
Show Information
</button>

<app-info-modal #infoModal> </app-info-modal>
于 2017-08-18T20:01:42.380 回答