如何在没有HTML交互的情况下在Angular 6的component2中使用component1的功能？答案

【问题标题】：How to use a function of component1 in component2 in Angular 6 without interaction of HTML?如何在没有HTML交互的情况下在Angular 6的component2中使用component1的功能？
【发布时间】：2019-08-08 11:49:22
【问题描述】：

我在 Component1 中有 testTry() 函数，它接受一个参数并打印值。

export class Component1 implements OnInit {

 testTry(name:any){
 console.log("Name-->",name);}

 ngOnInit(){    }

}

我有一个带有函数 sampleCall() 的 component2，我需要通过发送参数来调用 component1 的函数

export class Component2 implements OnInit {

 sampleCall(){
  let a = "Sravya";
  testTry(a);
}

 ngOnInit(){    }
}

如何在不涉及 HTML 的情况下从 component1 调用一个函数到 component2？

【问题讨论】：

将该功能移至服务
除此之外还有其他选择吗？
你可以使用 eventEmmiter

标签： angular angular6 eventemitter angular-event-emitter

【解决方案1】：

你可以使用@ViewChild，

我们可以使用它来控制Parent Component 内部的Child Component。当我们使用它时，我们会将子组件获取为Object，这样我们就可以调用子组件的方法和变量了。

Component2.ts

 @ViewChild(Component1) component1: Component1;

 sampleCall() {
  let a = "Sravya";
  this.component1.testTry(a);
}

【讨论】：

能否详细说明
它不是一个通用的解决方案，因为它要求 Component1 位于 Component2 内
OP的问题是没有html的交互，我认为使用@ViewChild比将它注入另一个组件更好。
@ganesh045 ：我认为他当时有亲子关系。凉爽的。 +1

【解决方案2】：

你可以这样做：

创建服务并在服务中移动方法
将component1 注入component2（不推荐）

试试：

export class Component2 implements OnInit {

constructor(private comp1: Component1){}

sampleCall(){
  let a = "Sravya";
  this.comp1.testTry(a);
}

 ngOnInit(){    }
}

【讨论】：

【解决方案3】：

您可以使用 EventEmmiter，如下所示。

ChangeService.ts

import {EventEmitter} from 'angular2/core';
export class ChangeService {
  calltestTry: EventEmitter<string> = new EventEmitter();
  constructor() {}
  emitcalltestTryEvent(data) {
    this.calltestTry.emit(data);
  }
  getcalltestTryEmitter() {
    return this.calltestTry;
  }
}

component1.ts

@Component({
  selector: 'app-component1',
})
export class ComponentOne {
  item: number = 0;
  subscription: any;
  constructor(private changeService:ChangeService) {}
  ngOnInit() {
    this.subscription = this.changeService.getcalltestTryEmitter()
      .subscribe(item => this.testTry(item));
  }
  testTry(item: string) {
     console.log(item);
  }
  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}

component2.ts

@Component({
  selector: 'app-component2',
})
export class ComponentTwo {
  item: number = 0;
  subscription: any;
  constructor(private changeService:ChangeService) {}
  ngOnInit() {
  }

  sampleCall(item: number) {
     let a = "Sravya";
     this.changeService.emitcalltestTryEvent(a);
  }
  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}

【讨论】：

【解决方案4】：

实际上有 4 种方法可以做到这一点。

将函数包含在服务中，以便您可以在任何地方注入它。
使您的函数静态化，以便您可以使用类访问它。（优点和缺点都有）
将组件注入其他组件，以便您可以访问它（不推荐）。
将您的函数作为输入参数传递给其他组件。

【讨论】：

【解决方案5】：

除了上述逻辑上正确的解决方案外，您还可以使用继承（打字稿中一个较少使用的功能）。

将所有函数保存在一个单独的文件中，例如common-logic.ts，其他组件可以使用extends 关键字轻松访问它们。

export class Component2 extends CommonLogic {}

组件2

export class Component2 implements OnInit extends CommonLogic {

 sampleCall(){
  let a = "Sravya";
  testTry(a);
 }

通用逻辑

export class CommonLogic {

 testTry(name:any){
   console.log("Name-->",name);
 }

}

注意：Angular 最多只允许继承一级。

【讨论】：

【解决方案6】：

您可以使用 ComponentFactoryResolver 来获取组件并使用它们的属性。

export class Component1 implements OnInit {

 testTry(name:any){
   console.log("Name-->",name);
 }

 ngOnInit(){    }

}

import {ViewChild, ComponentFactoryResolver, ViewContainerRef } from '@angular/core';
export class Component2 implements OnInit {

  @ViewChild('parent', { read: ViewContainerRef }) container: ViewContainerRef;

  constructor(
    private _cfr: ComponentFactoryResolver
  ) { }

  sampleCall(){
    const comp = this._cfr.resolveComponentFactory(Component1);
    const component1Ref = this.container.createComponent(comp);
    const component1 = component1Ref.instance;
    component1._ref = component1Ref;

    let a = "Sravya";
    component1.testTry(a);
 }

  ngOnInit(){    }
}

【讨论】：