無法讀取屬性'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。