1

Имеется 2 компонента, в разных ts файлах, как вызвать метод methodOne компонента ComponentOne из метода methodTwo компонента ComponentTwo.

export class ComponentOne {
   methodOne():void {
      // ...
   }
}

...

export class ComponentTwo {
   methodTwo():void {
      // new CompoentOne().methodOne(); - не работает
      // других идей нет
   }
}
0

3 ответа 3

2

Если первый компонент вложен во второй то можно воспользоваться аннотацией @ViewChild :

@Component({
  selector: 'my-child',
  providers: [],
  template: `
    <div>{{value}}</div>
  `,
  directives: []
})
export class Child {
  value: number;
  constructor() {
    this.value = 0;
  }
  public increment(){
    this.value+=1;
  }
}
@Component({
  selector: 'my-app',
  providers: [],
  template: `
    <div>
      <my-child></my-child>
      <button (click)="callChild()">Test</button>
    </div>
  `,
  directives: [Child]
})
export class App {
  @ViewChild(Child) childComponent: Child
  constructor() {
  }
  callChild(){
    this.childComponent.increment();
  }
}

Пример работы: plnkr

1
export class ComponentTwo {
constructor(public componentOne: ComponentOne){}
  methodTwo():void {
  componentOne.methodOne();

}
}
1

Данный ответ был дан на другом форуме человеком с ником Günter Zöchbauer. Но он просто обязан быть здесь, т.к. мне самому очень помог

Если com1 и com2 являются братьями и сестрами, вы можете использовать

@component({
  selector:'com1',
})
export class com1{
  function1(){...} 
}

com2 испускает событие с помощью EventEmitter

@component({
  selector:'com2',
  template: `<button (click)="function2()">click</button>`
)
export class com2{
  @Output() myEvent = new EventEmitter();
  function2(){...
    this.myEvent.emit(null)
  }
}

Здесь родительский компонент добавляет привязку события для прослушивания событий myEvent, а затем вызывает com1.function1(), когда такое событие происходит. #com1 - это шаблонная переменная, которая позволяет ссылаться на этот элемент из другого места в шаблоне. Мы используем это, чтобы сделать function1() обработчик события для myEvent com2:

@component({
  selector:'parent',
  template: `<com1 #com1></com1><com2 (myEvent)="com1.function1()"></com2>`
)
export class com2{
}

Для других вариантов связи между компонентами см. также https://angular.io/docs/ts/latest/cookbook/component-communication.html

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.