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

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

Программно:

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/…, записанный в коде, браузер всегда отсчитывает от корня сайта — то есть от ассетов рутового приложения, а не вашей сборки.

Сервис QAssetsService из @diasoft/qpalette-visual строит адреса файлов вашей сборки сам:

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

Правило одно для сервиса и для всех компонентов, принимающих путь к файлу (q-banner, q-product-card, qp-plate, редактор Monaco, translationsUrl):

Что передали	Куда ведёт
`data/reference.json` — путь без ведущего `assets/`	файл в ассетах вашей сборки: `/api/<сервис>/<компонент>/assets/data/reference.json`
`assets/data/reference.json`, `./assets/…`	как есть — браузер отсчитает от корня сайта, то есть ассеты рутового приложения, как и до 8.2.0
`/assets/…`, `https://…`, `data:`, `blob:`	как есть

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

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

Одно исключение из общего правила — у q-file-viewer: assets/… у него тоже ведёт в вашу сборку, а не в рутовое — Откуда отсчитывается путь к файлу.

Адрес вручную: версии до 8.2.0

До 8.2.0 компоненты не разворачивают путь без assets/, а браузер отсчитывает assets/… от корня сайта. Полный адрес файла из своей сборки тогда собирается руками — по тому же правилу, которым рутовое приложение отдаёт вашу сборку.

Веб-компонент продукта. Рутовое приложение отдаёт сборку от /api/<сервис>/<компонент>/, где сервис и компонент — имена, под которыми оно вас подключает: те же, что в endpoint записи меню или плагина. Файл из src/assets/ лежит по адресу /api/<сервис>/<компонент>/assets/<путь внутри assets>. Объявите префикс один раз и подставляйте его во все входы, принимающие путь:

// имена сервиса и компонента — те же, что в endpoint записи меню
const ASSETS = '/api/myproduct/catalog/assets';
 
export class CatalogComponent {
  readonly bannerUrl = `${ ASSETS }/banner-pics/hero.jpg`;   // q-banner [picture]
  readonly plateUrl = `${ ASSETS }/qpalette-plate-wc`;       // qp-plate [url]
}

provideQLocalization(withTransloco({ translationsUrl: '/api/myproduct/catalog/assets/i18n' }))

Путь от корня сайта компоненты всех версий используют как есть, поэтому такой код продолжит работать и после обновления — переписывать его на короткие пути можно постепенно.

Библиотечный проект. У библиотечного проекта своего сервиса нет: его файлы копируются в assets продукта-потребителя, и адрес знает только потребитель. Библиотека получает префикс через properties своего endpoint — так же, как адрес переводов (Получать адрес переводов извне):

// потребитель: подключает библиотеку и передаёт, где лежат её файлы
const endpoint: QEndpoint = {
  service: 'myproduct',
  component: 'catalog',
  route: '',
  properties: {
    assetsUrl: '/api/myproduct/catalog/assets/<library>'   // каталог скопированного пакета
  }
};

// библиотека: читает префикс из QWebComponentProperties и строит пути от него
export class LibraryWidgetComponent {
  private readonly properties = inject(QWebComponentProperties);
  readonly iconUrl = `${ this.properties?.assetsUrl }/icons/widget.svg`;
}

Имя свойства (assetsUrl в примере) — часть контракта библиотеки: опишите его в README.md пакета.

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