1

我在 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？

4

6 回答 6

0

你可以使用@ViewChild，

我们可以使用它来控制Child Componentinside Parent Component。当我们使用它时，我们将得到子组件，Object以便我们能够调用子组件的方法和变量。

组件2.ts

 @ViewChild(Component1) component1: Component1;

 sampleCall() {
  let a = "Sravya";
  this.component1.testTry(a);
}
于 2019-03-18T06:43:38.287 回答
0

你可以做：

  1. 创建服务并在服务中移动方法

  2. 注入component1（component2不推荐）

尝试：

export class Component2 implements OnInit {

constructor(private comp1: Component1){}

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

 ngOnInit(){    }
}
于 2019-03-18T06:46:29.787 回答
0

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

将所有函数保存在一个单独的文件中，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 只允许继承最多一级。

于 2019-03-18T06:55:36.447 回答
0

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

变更服务.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;
  }
}

组件1.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();
  }
}

组件2.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();
  }
}
于 2019-03-18T06:55:36.730 回答
0

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

  1. 将函数包含在服务中，以便您可以在任何地方注入它。
  2. 使您的函数静态，以便您可以使用类访问它。（优点和缺点都在那里）
  3. 将组件注入到另一个组件中，以便您可以访问它（不推荐）。
  4. 将您的函数作为输入参数传递给其他组件。
于 2019-03-18T07:02:30.350 回答
0

您可以使用 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(){    }
}
于 2019-03-18T07:44:41.457 回答