如何从组件 A 调用组件 B 的函数答案

【问题标题】：How to call function of component B from component A如何从组件 A 调用组件 B 的函数
【发布时间】：2019-05-13 18:00:38
【问题描述】：

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

我有一个组件 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
  });
  }

【问题讨论】：

正确的语法是使用@ViewChild('template-variable') contactForm: ContactformComponent;，你需要在你的组件HTML中使用template-variable，像这样
如果你使用服务会更好，因为你创建了一个服务，你可以在任何地方使用。
B 是 A 的孩子吗？
@Ahmed 我说的是同样的使用服务
@ahmed - 将您的组件变成服务。由于您的组件未在任何地方初始化，因此您变得未定义。要初始化它，您需要在模板中的某个地方定义它。但是请使用您在尝试复制的答案中建议的服务。

标签： javascript html angular typescript

【解决方案1】：

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

public saveContact() {
    //saveContact
 }

在父类中...

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

【讨论】：

是的，我尝试公开该方法，但仍然是同样的问题
你有在 app.module 中声明的子组件吗？
是的，我已经声明了
你的父组件模板是什么样的？
insert.component.html 怎么样

【解决方案2】：

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

在你的 parent.component.ts 中导入 ViewChild

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";

@组件({ 选择器：“应用程序根”， templateUrl: "./app.component.html", styleUrls: ["./app.component.css"] }) 导出类 AppComponent { @ViewChild(ChildComponent) 联系人表单； saveContactForm() { 控制台.log(this); setTimeout(() => this.contactForm.saveContact(), 0); } }

parent.component.html

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

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

sandbox.517cc37e.js:1 ERROR TypeError: Cannot read property 'saveContact' of undefined

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

【讨论】：