Question

我认为这可能是一个重复的问题。

我有一个组件B，其中有一个功能saveContact()。我想从组件A的另一个函数中调用此函数。

所以我

在组件A中导入了组件B。然后创建了一个ViewChild
@ViewChild(ContactformComponent) contactForm: ContactformComponent;
调用了函数

saveContactForm() { this.contactForm.saveContact(); }

运行应用程序时，出现错误TypeError: Cannot read property 'saveContact' of undefined。有人可以告诉我我在做什么错。

父组件

import { ContactformComponent } from './forms/contactform/contactform.component';

@Component({
selector: 'app-insert',
templateUrl: './insert.component.html',
styleUrls: ['./insert.component.scss'],
animations: [routerTransition()]
})
export class InsertComponent implements OnInit {
@ViewChild(ContactformComponent) contactForm;

saveContactForm() {
this.contactForm.saveContact();
}
}

子组件

@Component({
selector: 'app-contactform',
templateUrl: './contactform.component.html',
styleUrls: ['./contactform.component.scss']
})
export class ContactformComponent implements OnInit {
contactForm: FormGroup;

... // Form Code

  public saveContact() {
  const savedContact = {
  contactType: this.contactType,
  contactDescription: this.contactTypeDescription,
  contactSubType: this.contactSubType,
  contactSubTypeDescription: this.contactSubTypeDescription,
  referenceNumber: this.referenceNumber,
  lastVerifiedDate: this.parseDate(this.contactlastVerifiedDate.toString()),
  startDate: this.parseDate(this.contactStartDate.toString()),
  endDate: this.parseDate(this.contactEndDate.toString())
  };
  this.savedContact.emit(savedContact);
  this.snackbar.open('Contact Saved,Click on Create Customer or Fill more 
  Details', 'Close', {
  duration: 5000
  });
  }

Answer 1

子组件中的方法是否公开：

public saveContact() {
    //saveContact
 }

在父类中...

export class A {
@ViewChild(ContactformComponent) contactForm: ContactformComponent;

Answer 2

要解决此问题，请在父component.html中包含子组件

将ViewChild导入您的parent.component.ts

import { Component, ViewChild } from "@angular/core";
在parent.component.ts中导入子组件，并在parent.component.html中包含子组件

parent.component.ts

import { Component, ViewChild } from "@angular/core"; import { ChildComponent } from "./child.component";

@Component({ selector: "app-root", templateUrl: "./app.component.html", styleUrls: ["./app.component.css"] }) export class AppComponent { @ViewChild(ChildComponent) contactForm; saveContactForm() { console.log(this); setTimeout(() => this.contactForm.saveContact(), 0); } }

parent.component.html

<child></child>
<button (click)="saveContactForm()">Save</button>

从parent.component.html中删除上述子组件时，它将在开发人员工具中抛出以下错误

sandbox.517cc37e.js：1错误TypeError：无法读取未定义的属性“ saveContact”

工作示例-https://codesandbox.io/s/rlq4xj5q0n

如何从组件A调用组件B的功能

2 个答案: