Angular, динамически получает ссылку на компонент при нажатии кнопки

#javascript #angular

Вопрос:

У меня есть компонент, который может содержать 1 из 10 различных дочерних компонентов, в зависимости от некоторого условия.

 <div *ngIf="type === 1">
    <component_1></component_1>
</div>

<div *ngIf="type === 2">
    <component_2></component_2>
</div>

<div *ngIf="type === 3">
    <component_3></component_3>
</div>
...

В этом компоненте мне нужен метод, который в любой момент вернет правильную ссылку на дочерний компонент (например, при нажатии кнопки).

 getComponentRef() {
  switch (this.type) {
     case 1: {
       // return component_1 ref;
       break;
     }
     case 2: {
       // return component_2 ref;
       break;
     }
     case 3: {
       // return component_3 ref;
       break;
     }
     ...
   }
}

Есть идеи?

1. Почему бы вам не передать ссылку уже обработчику щелчка?

2. Обработчик щелчка будет поступать из родительского компонента. Родительский компонент не знает, какой компонент отображается.

3. Создайте эти компоненты для реализации общего интерфейса; используйте @ViewChildren с этим типом интерфейса, затем в вашем случае переключения просто переключитесь на тип компонента. Это был бы самый умный способ сделать это, чтобы, если эти компоненты имеют общее поведение, вы могли напрямую обрабатывать действия с помощью интерфейса.

4. У меня есть 3 типа компонентов, к сожалению, у них нет никаких общих функций.

Ответ №1:

Сделайте это:-

parent.component.html

 <div *ngIf="type === 1">
    <component_1 (emittedEvent)="setActiveChildTab($event)"></component_1>
</div>

<div *ngIf="type === 2">
    <component_2 (emittedEvent)="setActiveChildTab($event)"></component_2>
</div>

<div *ngIf="type === 3">
    <component_3 (emittedEvent)="setActiveChildTab($event)"></component_3>
</div>
...

parent.component.ts создайте переменную для хранения ссылки на дочерний элемент, например activeTab: string
```
 setActiveChildTab(activeTab: string) {
    this.activeTab = activeTab;
}
  
```
В каждом child.component.ts создайте переменную для создания активной вкладки, например
@Output() emittedEvent: EventEmitter<any> = new EventEmitter() .
```
 ngOnInit() {
    this.emittedEvent.emit('Child1');
}
  
```

Дайте мне знать, работает ли это или нет.

Ответ №2:

1) Вы уже ввели значение ngIf . Вы можете его использовать.

2) Вам нужно создать один EventEmitter в общем сервисном файле.

При этом вы можете использовать флаг для всех компонентов и подписаться на компонент. ngOnInit()

3) Вы также можете управлять с помощью cookie.

4) Управление также осуществляется с помощью передачи данных между родителями и дочерними элементами.

1. Я использую цикл для рендеринга этих компонентов. Как список компонентов, так и любой компонент может быть другого типа. Есть ли какой-нибудь способ сделать это просто, чтобы динамически получать ссылку на дочерний компонент именно так, как мне нужно?

2. Да, вы можете выбрать 2-й вариант. Я использую его для такого типа случаев, и он отлично работает для меня. Я надеюсь, что это также будет полезно для вас.

3. Я исправил эту проблему, добавив входной параметр ‘ComponentRef’ к каждому дочернему компоненту, а в ngOnInit установил ‘this’ текущего компонента в ‘ComponentRef’. В этом случае родительский компонент будет иметь правильную ссылку на дочерний компонент. Вы не поместили сюда никакого кода, и я не очень хорошо понял некоторые из ваших вариантов, но вы дали мне идею, спасибо :). Я также могу опубликовать свой ответ здесь.