如何在没有HTML交互的情况下，在Angular6中的component2中使用component1的一个函数？

Question

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

export class Component1 implements OnInit {

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

 ngOnInit(){    }

}

我有一个带有函数 sampleCall() 的组件 2，我需要在其中通过发送参数来调用组件 1 的一个函数

export class Component2 implements OnInit {

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

 ngOnInit(){    }
}

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

Answer 1

您可以使用 @ViewChild、

我们可以使用它来控制 Parent Component 中的 Child Component。我们在使用的时候，会得到子Component为Object，这样我们就可以调用Child Component的方法和变量了。

Component2.ts

 @ViewChild(Component1) component1: Component1;

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

Answer 2

你可以这样做：

创建服务并将方法移动到服务内部
将component1注入component2（不推荐）

尝试：

export class Component2 implements OnInit {

constructor(private comp1: Component1){}

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

 ngOnInit(){    }
}

Answer 3

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

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

export class Component2 extends CommonLogic {}

组件 2

export class Component2 implements OnInit extends CommonLogic {

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

CommonLogic

export class CommonLogic {

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

}

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

Answer 4

您可以如下使用 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();
  }
}

Answer 5

实际上有 4 种方法。

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

Answer 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(){    }
}

如何在没有HTML交互的情况下，在Angular6中的component2中使用component1的一个函数？

How to use a function of component1 in component2 in Angular 6 without interaction of HTML?

eventemitter

angular

angular6

angular-event-emitter