无法读取属性'show'的undefined

Question

我有两个组件，客户和客户s组件。客户组件拥有客户列表，当我点击客户时，客户组件应打开一个模式。

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);回报undefined和this.lgModal.show();给出ERROR TypeError: Cannot read property 'show' of undefined错误..

编辑：

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

Answer 1

，我发现你的问题的解决方案，这要归功于这个问题：https://www.bountysource.com/issues/35264857-how-to-call-modal-from-parent-component

所做的更改是让孩子为​​（例如）

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

然后在父模板有：

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

和父模板，你可以直接打电话给你的方法的孩子，如果你喜欢：

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

和孩子，你声明你@ViewChild：

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

应该这样做！

这里有一个DEMO与:)

Answer 2

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

您需要将代码改成这样：

@ViewChild(ModalDirective) public lgModal: ModalDirective; 

注意：您无法查询抽象类或接口。它必须是组件或指令的类型。

编辑：

您不能创建的组件是这样的：

this.customerComponent = new CustomerComponent(); 

的角需要被用来创建组件这是行不通的。尝试将客户组件添加到客户模板，然后使用@ContentChild访问该组件。

@ContentChild(CustomerComponent) 
public customerComponent: CustomerComponent; 

为@ContentChild参考将被设置AfterContentInit。