无法读取未定义的属性 'show'

Question

我有两个组件，customer 和 customers 组件。客户组件包含客户列表，当我单击客户时，客户组件应打开一个模式。

customers.component.ts

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

import { CustomerComponent } from '../customer/customer.component';

export class Customer {
  id: number;
  name: String;
}

const CUSTOMERS: Customer[] = [
  {
    id: 1,
    name: 'Customer one'
  },
  {
    id: 2,
    name: 'Customer two'
  }
];

@Component({
  selector: 'app-customers',
  templateUrl: './customers.component.html',
  styleUrls: ['./customers.component.css'],
  providers: [
    CustomerComponent
  ]
})
export class CustomersComponent implements OnInit {
  title: String;
  customers: Customer[] = CUSTOMERS;
  customerComponent: CustomerComponent;
  // or
  @ContentChild(CustomerComponent)
  public customerComponent: CustomerComponent;

  constructor() {
    this.title = 'Customers';

    this.customerComponent = new CustomerComponent();
    // tried removing
  }

  ngOnInit() {
  }

  showCustomer(customer: Customer) {
    this.customerComponent.openModal(customer);
  }
}

customers.component.html

<app-customer></app-customer>
<div id="page-wrapper">
  <div class="container-fluid">
    <div class="row">
      <div class="col-lg-12">
        <h1 class="page-header">{{title}}</h1>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-12">
        <div class="panel panel-default">
          <div class="panel-heading">
            De klanten pagina
          </div>
          <div class="panel-body">
            <div class="table-responsive">
              <table class="table table-striped table-bordered table-hover">
                <thead>
                <tr>
                  <th>#</th>
                  <th>Name</th>
                </tr>
                </thead>
                <tbody *ngFor="let customer of customers;">
                <tr (click)="showCustomer(customer)" [style.cursor]="'pointer'">
                  <td>{{customer.id}}</td>
                  <td>{{customer.name}}</td>
                </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

因此，在单击 tr 之后，CustomersComponent 应该显示模态。

customer.component.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import { Customer } from '../customers/customers.component';
import { ModalDirective } from 'ngx-bootstrap';

@Component({
  selector: 'app-customer',
  templateUrl: './customer.component.html',
  styleUrls: ['./customer.component.css'],
})
export class CustomerComponent implements OnInit {
  @ViewChild('lgModal') public lgModal: ModalDirective;
  // or
  @ViewChild(ModalDirective) public lgModal: ModalDirective;

  constructor() {
  }

  ngOnInit() {
  }

  openModal(customer: Customer): void {
    console.log(customer);
    console.log(this.lgModal);

    this.lgModal.show();
  }
}

还有customer.component.html

<div bsModal #lgModal="bs-modal" 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">
        <h4 class="modal-title pull-left">Large modal</h4>
        <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">
        ...
      </div>
    </div>
  </div>
</div>

console.log(this.lgModal); returns undefined 和 this.lgModal.show(); 给出 ERROR TypeError: Cannot read property 'show' of undefined 错误..

编辑：

试图将 <app-customer></app-customer> 添加到 customers.component.html

Answer 1

@ViewChild 和其他内容查询绑定使用组件的构造函数来查找匹配项。当您传递字符串时，它假设您指的是依赖项注入令牌。

您需要将代码更改为：

 @ViewChild(ModalDirective) public lgModal: ModalDirective;

Note: You can not query abstract classes or interfaces. It has to be the type of the component or directive.

编辑：

您不能以这种方式创建组件：

this.customerComponent = new CustomerComponent();

这将不起作用，因为 Angular 需要用于创建组件。尝试将客户组件添加到客户模板，然后使用 @ContentChild 访问该组件。

@ContentChild(CustomerComponent)
public customerComponent: CustomerComponent;

@ContentChild 的引用将设置为 AfterContentInit。

Answer 2

由于这个问题，我找到了解决您的问题的方法：https://www.bountysource.com/issues/35264857-how-to-call-modal-from-parent-component

所做的更改是将 child 设为 exportAs: 'child'（例如）

@Component({
  ....
  exportAs: 'child'
})

然后在parent模板中有：

<app-customer #c="child"></app-customer>

并且在 parent 模板中，如果您愿意，您可以直接调用 child 中的方法：

(click)="c.openModal(customer)"

并在 child 中声明您的 @ViewChild:

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

应该可以！

这里有一个DEMO可以一起玩:)

Answer 3

我遇到了类似的问题。显示的错误是未定义的，无法读取未定义的属性 'hide'... 我通过在（子）构造函数中添加我的模态来解决它，如下所示，它是在父组件中实现的。

构造函数（public openModalDetails: BsModalRef）{ }

无法读取未定义的 属性 'show'

Cannot read property 'show' of undefined

angular

ngx-bootstrap

无法读取未定义的属性 'show'