Angular CLI - 訪問子組件

Question

我的問題是使用@VIEWCHILD訪問子組件方法'edit'，但它不起作用。我在哪裏錯過了什麼？

控制檯日誌： http://imgur.com/a/aDusn

CompanyComponent類（它重要的部分）

重要泳道： 1） CompanyRegistrationComponent導入 2） @VIEWCHILD該組件上是否有 3）方法openEditModal在html文件中被正確調用

import { Component, OnInit, ViewChild } from '@angular/core'; 
    import { ActivatedRoute, Params } from '@angular/router'; 
    import { CompanyService } from '../../../services/company.service'; 
    import { AdvertService } from '../../../services/advert.service'; 
    import { GlobalEventManager } from "../../../services/global-event-manager.service"; 
    import 'rxjs/add/operator/switchMap'; 
    import { SemanticModalComponent } from 'ng-semantic'; 
    import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms'; 
    import { FlashMessagesService } from 'angular2-flash-messages'; 
    import { CompanyRegistrationComponent } from '../../registration/company-registration/company-registration.component'; 
    @Component({ 
     selector: 'app-company', 
     templateUrl: './company.component.html', 
     styleUrls: ['./company.component.css'] 
    }) 
    export class CompanyComponent implements OnInit { 
     @ViewChild(CompanyRegistrationComponent) companyRegistration: CompanyRegistrationComponent 
     @ViewChild('commissionModal') private commissionModal: SemanticModalComponent 
     private company: any; 
     private showTransactionButton: boolean; 
     private reviews: any; 
     private editButton: boolean; 
     private userId: number; 
     private adverts: any; 
     private form: FormGroup; 

     constructor(
     private _fb: FormBuilder, 
     private route: ActivatedRoute, 
     private companyService: CompanyService, 
     private advertService: AdvertService, 
     private fm: FlashMessagesService, 
     private _globalEventManager : GlobalEventManager) { 
     this.showTransactionButton = false; 
     this.editButton = false; 
     this.reviews = null; 
     } 

     ngOnInit() { 
     this.getCompany(); 
     this.subscribeCurrentUser(); 
     this.buildForm(); 
     } 
     private openEditModal(editedCompany){ 
     this.companyRegistration.edit(editedCompany); 
     } 

CompanyRegistrationComponent類（它的重要組成部分）

import { Component, OnInit, ViewChild, ElementRef, NgZone } from '@angular/core'; 
    import { SemanticModalComponent } from 'ng-semantic'; 
    import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms'; 
    import { MapsAPILoader } from "angular2-google-maps/core"; 
    import { Company } from '../../../models/Company'; 
    import { mailValidator } from '../../../validators/mail-validator'; 
    import { phoneValidator } from '../../../validators/phone-validator'; 
    import { rangeValidator } from '../../../validators/range-validator'; 
    import { passwordValidator } from '../../../validators/password-validator'; 
    import { LocalizationHelper } from '../../../helpers/LocalizationHelper'; 
    import { CompanyService } from '../../../services/company.service'; 
    import { FlashMessagesService } from 'angular2-flash-messages'; 

    @Component({ 
     selector: 'app-company-registration', 
     templateUrl: './company-registration.component.html', 
     styleUrls: ['./company-registration.component.css'] 
    }) 

    export class CompanyRegistrationComponent implements OnInit { 

     @ViewChild('companyRegistration') private companyRegistration: SemanticModalComponent 
     @ViewChild('location') private locElementRef: ElementRef; 
     private form: FormGroup; 
     private company: Company; 
     private loaderStatus; 
     private editedCompany: any; 
     constructor(
     private _fb: FormBuilder, 
     private mapsAPILoader: MapsAPILoader, 
     private ngZone: NgZone, 
     private companyService: CompanyService, 
     private fm: FlashMessagesService) 
     { 
      this.company = new Company(); 
     } 

     ngOnInit() { 
     this.setFormValidations(); 
     LocalizationHelper.configureLocationAutocomplete(this.mapsAPILoader, this.locElementRef, this.ngZone, this.form) 
     } 

     open(){ 
     this.companyRegistration.show(); 
     } 
     edit(editedCompany){ 
     // this.editedCompany = editedCompany; 
     // this.setFormValues(); 
     this.companyRegistration.show(); 
     } 

我試圖@ViewChild該類其他地方，不過，同樣的問題。

模板：

<sm-button *ngIf="editButton && !showTransactionButton" class="positive" (click)="openEditModal(company)">Edit</sm-button> 

Answer 1

問題來源於此行：this.companyRegistration.edit(editedCompany);

因爲companyRegistration這裏是因爲它的聲明中未定義：

@ViewChild(CompanyRegistrationComponent) companyRegistration: CompanyRegistrationComponent; 

u必須申報ViewChild與名稱設置在父組件的模板中： ./company.component.html：

<app-company-registration #acr></app-company-registration> 

所以你在./company.component寫：

@ViewChild('acr') companyRegistration: CompanyRegistrationComponent; 

希望這將幫助你:)