Возможности взаимодействия с рутовым приложением

Открытие в новой вкладке

Программно:

import { QEventsService } from '@diasoft/qpalette-visual';
 
constructor(private readonly qEventsService: QEventsService){
  this.qEventsService.openNewTab({
    caption: 'Название вкладки',
    url: '/interface/service/component/route?query=param'
  });
}

Декларативно:

   <a [qLink]="['/interface/service/component/route?query=param']" qTabCaption="Название вкладки" target="_blank">
  Откроется в новой вкладке
  <q-icon icon="pi-external-link"></q-icon>
</a>

Не забудьте использоватьtarget="_blank".

Чтобы в своём компоненте получить параметры, нужно вовремя получить событие роутинга:

constructor(
  private readonly activatedRoute: ActivatedRoute
) {
  this.activatedRoute.queryParams
    .subscribe((params) => {
      console.log(params);
    });
}

Закрытие вкладки

import { QEventsService } from '@diasoft/qpalette-visual';
 
constructor(private readonly qEventsService: QEventsService){
  this.qEventsService.closeThisTab();
}

Изменение названия вкладки

import { QEventsService } from '@diasoft/qpalette-visual';
 
constructor(private readonly qEventsService: QEventsService){
  this.qEventsService.updateTabCaption('Новое название');
}

Адреса собственных ассетов

Рутовое приложение отдаёт свои файлы от корня сайта, а веб-компонент — от собственного адреса вида /api/<сервис>/<компонент>/. Поэтому путь assets/…, записанный в коде, у рутового приложения и у веб-компонента ведёт в разные места, и жёстко прописывать его в приложении нельзя.

Сервис QWebComponentAssetsService из @diasoft/qpalette-visual строит такие адреса сам:

import { QWebComponentAssetsService } from '@diasoft/qpalette-visual';
 
export class ReportsComponent {
  private readonly assets = inject(QWebComponentAssetsService);
 
  // в веб-компоненте → /api/<сервис>/<компонент>/assets/data/reference.json
  // в рутовом приложении → /assets/data/reference.json
  readonly referenceUrl = this.assets.resolve('assets/data/reference.json');
}

Правила простые:

относительный путь (assets/…) разворачивается в адрес ассетов вашей сборки;
путь от корня сайта (/assets/…) и полный URL остаются без изменений — так можно сослаться на файл рутового приложения или на внешний адрес;
метод baseUrl() возвращает сам адрес, от которого отдаётся ваша сборка.

Адрес определяется по файлу сборки, которым рутовое приложение подключило компонент, поэтому дополнительных настроек не требуется.

Миграция проекта в вебкомпонент Баннер