时间戳

首页 > 解决方案 > 在组件之间调用函数

angular6 - 在组件之间调用函数

问题描述

我有两个组件（comp1 和 comp2）。我正在尝试从 comp2 调用 comp1 内部的一个函数，但它没有发生并且它正在引发错误。但是从comp1调用comp2内部的函数时成功。

我希望它以两种方式发生（即）（a）从comp1内部的comp2触发函数（b）从comp2内部的comp1触发函数

我附上了示例代码。 https://stackblitz.com/edit/angular-jxfzqb

标签： angular6

解决方案

该错误是从 comp1 上的构造函数抛出的，它无法生成 comp2 的新实例。

请尽量不要在组件之间使用提供的组件，我建议您从 app.component 获取绑定组件到 comp1 和 comp2，例如：

app.component.html

<app-comp1 #comp1 [Comp2Component]="comp2"></app-comp1>
<app-comp2 #comp2 [Comp1Component]="comp1"></app-comp2>

app.component.ts

import { Component, ViewChild } from '@angular/core';
import { Comp1Component } from './comp1/comp1.component';
import { Comp2Component } from './comp1/comp2/comp2.component';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = 'Angular';
  // Get component with attr #comp1
  @ViewChild('comp1') comp1: Comp1Component;
  // Get component with attr #comp2
  @ViewChild('comp2') comp2: Comp2Component;
}

comp1.component.ts

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-comp1',
  templateUrl: './comp1.component.html',
  styleUrls: ['./comp1.component.css']
})
export class Comp1Component implements OnInit {
  @Input() Comp2Component: Comp2Component;
  constructor() { }

  ngOnInit() {
  }

  funcInComp1() {
    console.log("comp1 function triggered from comp2");
  }

  triggerComp2Function() {
    this.Comp2Component.funcInComp2();
  }
}

comp2.component.ts

import { Input, Component, OnInit } from '@angular/core';
import { Comp1Component } from '../comp1.component';
@Component({
  selector: 'app-comp2',
  templateUrl: './comp2.component.html',
  styleUrls: ['./comp2.component.css']
})
export class Comp2Component implements OnInit {
  @Input() Comp1Component: Comp1Component

  constructor() { }

  ngOnInit() {
  }
  triggerComp1Function() {
    this.Comp1Component.funcInComp1();
  }
  funcInComp2() {
    console.log("comp2 function triggered from comp1");
  }
}

堆栈闪电战： https ://stackblitz.com/edit/angular-itmzhe

推荐阅读