Question

我的问题是访问子组件方法＆＃39;编辑＆＃39;使用@VIEWCHILD，但它不起作用。我在哪里错过了什么？

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;

你必须使用父组件模板中设置的名称声明ViewChild： ./ company.component.html：

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

所以在你的 ./ company.component ：

中写一下

@ViewChild('acr') companyRegistration: CompanyRegistrationComponent;

希望这会对你有所帮助:)

Angular CLI - 访问子组件

1 个答案: