Как использовать функцию component1 в component2 в Angular 6 без взаимодействия HTML? - PullRequest
Новая
       30

Как использовать функцию component1 в component2 в Angular 6 без взаимодействия HTML?

1 голос
/ 18 марта 2019

У меня есть функция testTry () в Component1, которая принимает один параметр и печатает значение. 

export class Component1 implements OnInit {

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

 ngOnInit(){    }

}

У меня есть component2 с функцией sampleCall (), в которой мне нужно вызвать функцию component1, отправив параметр 

export class Component2 implements OnInit {

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

 ngOnInit(){    }
}

Как бы я вызвал функцию из component1 в component2 без использования HTML?

Ответы [ 6 ]

0 голосов
/ 18 марта 2019

Вы можете использовать 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(){    }
}
0 голосов
/ 18 марта 2019

На самом деле есть 4 способа сделать это.

  1. Включение функции в службу, чтобы вы могли внедрить ее в любое место.
  2. Создание статической функции, так что выможет получить доступ к нему с помощью класса.(Плюсы и минусы есть)
  3. Внедрение компонента в другой компонент, чтобы вы могли получить к нему доступ (не рекомендуется).
  4. Передача функции в качестве входного параметра другому компоненту.
0 голосов
/ 18 марта 2019

Вы можете использовать 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();
  }
}
0 голосов
/ 18 марта 2019

Помимо вышеупомянутых решений, которые логически верны, вы также можете использовать Наследование (менее используемая особенность машинописи).

Храните все функции в отдельном файле , например common-logic.ts, и другие компоненты могут просто получить к ним доступ, используя ключевое слово extends. 

export class Component2 extends CommonLogic {}

Component2 

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 допускает наследование только до одного уровня.

0 голосов
/ 18 марта 2019

Вы можете сделать:

  1. Создание службы и перемещение метода внутри службы

  2. Ввести component1 в component2 (не рекомендуется)

Попробуйте: 

export class Component2 implements OnInit {

constructor(private comp1: Component1){}

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

 ngOnInit(){    }
}
0 голосов
/ 18 марта 2019

Вы можете использовать @ViewChild,

Мы можем использовать это, чтобы получить контроль для Child Component внутри Parent Component.Когда мы его использовали, мы получим дочерний компонент как Object, чтобы мы могли вызывать методы и переменные дочернего компонента.

Component2.ts

 @ViewChild(Component1) component1: Component1;

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