Инициализировать плагин через сервис и использовать его в дочерних компонентах - PullRequest
Новая
       4

Инициализировать плагин через сервис и использовать его в дочерних компонентах

0 голосов
/ 17 июня 2020

Я пытаюсь инициализировать плагин в родительском элементе через службу, а затем использовать объект плагина в дочерних компонентах. Но у меня проблема с тем, что объект плагина возвращает undefined в дочерних компонентах. Я считаю, что если я инициализирую плагин в constructor (), я смогу получить к нему доступ из дочерних компонентов, но я не знаю, как это сделать.

Родительский компонент 

export class HomeComponent implements AfterViewInit {
  constructor(private tooltip: TooltipService) { }

  ngAfterViewInit(): void {
    this.tooltip.initPlugin('.item-tooltip');
  }
}

Код TooltipService 

@Injectable({
  providedIn: 'root'
})

export class TooltipService {
  public plugin: any;

  constructor() {}

  public initPlugin(elementId: string): void {
    this.plugin = new pluginName(elementId);
  }
}

Дочерний компонент 

export class AccordionComponent implements OnInit {
  constructor(private tooltip: TooltipService) { }

  ngOnInit(): void {
    console.log(this.tooltip.plugin.class);
  }
}

Ответы [ 3 ]

0 голосов
/ 17 июня 2020

вы должны использовать для этого rx js, поскольку у вас есть проблемы с синхронизацией, когда вы обращаетесь к нему в дочернем элементе до того, как он установлен родителем, rx js решит это раз и навсегда ... 

import { ReplaySubject } from 'rxjs';

export class TooltipService {
  private pluginSource = new ReplaySubject<any>(1); // use a subject (private)
  plugin$ = this.pluginSource.asObservable(); // public observable

  constructor() {}

  public initPlugin(elementId: string): void {
    this.pluginSource.next(new pluginName(elementId)) // call next on subject to set value
  }
}

в дочернем, доступ вроде: 

private sub: Subscription;
ngOnInit(): void {
  // subscribe to observable to receive values, store subscription ref
  this.sub = this.tooltip.plugin$.susbcribe(plugin => console.log(plugin.class));
}

ngOnDestroy() {
  this.sub.unsubscribe(); // always unsubscribe
}
0 голосов
/ 17 июня 2020

Похоже, ваши компоненты инициализированы в неправильном порядке.

OnInit инициализируется до AfterViewInit. Попробуй поменять;)

0 голосов
/ 17 июня 2020 
In TooltipService code, your initPlugin function accepting a string parameter.

public initPlugin(elementId: string): void {
    this.plugin = new pluginName(elementId);
  }

But in Parent Component, you are calling initPlugin function without any arguments.

 this.tooltip.initPlugin();

so that's why it return undefined.
...