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

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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