динамическая настройка функциональной переменной - PullRequest
Новая
       25

динамическая настройка функциональной переменной

0 голосов
/ 18 апреля 2019

Этот вопрос относится к синтаксически анонимным / функциям со стрелками / дополнительным / фабричным функциям DP: У меня есть компонент, который встроен в HTML. Компонент имеет событие щелчка, которое связано с функцией. Содержание этой функции зависит от другого компонента, который имеет ссылку на этот компонент. Это компонент с событием click: HTML: 

<div  (click)="doSomething()">Content.....</div> \\ Should it be with a brackets ?

В компоненте я просто хочу определить сигнатуру функции: 

@Component({
 selector: 'app-embedded'
})
export class className 
{
  constructor() { }
  ngOnInit() {   }
  doSomething:(booleanparams: boolean) => any; //The function get a boolean parameter as input and return void or any
}

Теперь этот компонент встроен: 

<div >
    <app-embedded #emb></app-embedded>
</div>

Это компонент контейнера встроенного компонента, который имеет ссылку на встроенный компонент: 

@Component({
 selector: 'app-container',
})
export class container
{
   @ViewChild('emb') private emb: ElementRef;
   booleanParam : booelan;
   constructor()
   {
      emb.doSomething = containerFunction(true);
   }

   containerFunction(booleanParam : boolean)
   { 
       // do something in this context
   }
}

Идея состоит в том, что этот встроенный компонент встроен во многие другие контейнеры, и всякий раз, когда событие click вызывает триггер, должна выполняться функция, заданная в переменной функции doSomething.

Какие изменения в коде мне нужно сделать, чтобы добиться этого?

1 Ответ

0 голосов
/ 18 апреля 2019

Лучший способ сделать это - просто использовать генератор событий и захватить событие на другой стороне?таким образом, встроенный элемент будет иметь: 

@Component({
 selector: 'app-embedded'
})
export class className 
{

  @Output()
  public something: EventEmitter<boolean> = new EventEmitter<boolean>();

  constructor() { }
  ngOnInit() {   }
  doSomething:(booleanparams: boolean) {
    this.something.emit(booleanparams);
  }; //The function get a boolean parameter as input and return void or any
}

Тогда, где он называется: 

<div >
    <app-embedded #emb (something)="doSomething($event)"></app-embedded>
</div>

Другое решение, которое позволило бы возврат 

@Component({
 selector: 'app-embedded'
})
export class className 
{

  @Input()
  public somethingFunc: (boolean)=>any;

  constructor() { }
  ngOnInit() {   }
  doSomething:(booleanparams: boolean) {
    let w_potato = this.somethingFunc(booleanparams); 
    //Do whatever you want with w_potato
  }; //The function get a boolean parameter as input and return void or any
}

в этом случаевид будет 

<div >
    <app-embedded #emb [somethingFunc]="doSomething"></app-embedded>
</div>

Надеюсь, это поможет!Передача функции или выдача события будет гораздо более сложной задачей, чем попытка изменить экземпляр компонента.Кроме того, конструктор вызывается только один раз, когда запускается Angular, поэтому в то время #emb не будет определяться как что-либо.Если вы хотите сделать это таким образом, вам придется связать себя с чем-то ngAfterViewInit.Но опять же, я думаю, что прохождение этого через атрибуты будет гораздо более угловатым.

Удачи, дайте мне знать, если это не подходит вашему ответу.

...