Q.Web-Component

Q.Web-Component позволяет встраивать приложения в виде веб-компонентов в свой проект. Вы можете отображать их, например, в модальном окне или просто на странице и взаимодействовать с ними как с обычными Angular-компонентами: с помощью @Input(), @Output() или сервиса.

Термины и определения

Главный модуль проекта обычно, AppModule, находящийся в src/app.module.tsРодительский модульМодуль, в компонент которого встраивается веб-компонентВеб-компонентСовместимое с Q.Palette приложение, которое будет встроено на страницу

Создание веб-компонента

Откроем главный модуль вашего проекта и установим конфигурацию для загрузки веб-компонентов:

import { QWebComponentModule } from '@diasoft/qpalette-visual';
...
@NgModule({
  imports:[
    QWebComponentModule.forRoot({
      bundleUrl: '/api/$service/$component/main.js'
    })
  ]
})
export class AppModule

Чтобы просто скопировать команды ниже, введите название создаваемого веб-компонента:

Перейдите в корневую директорию вашего основного приложения (там, где angular.json) и выполните команду

undefined

В случае успешного завершения операции, в директории вашего проекта появится директория projects, внутри которой будет директория с названием вашего нового веб-компонента

Теперь выполним команду преобразования приложения к Q.Palette-совместимому. Для этого выполним команду:

undefined

Встраивание веб-компонента

Импортируйте модуль QWebComponentModule в тот модуль, где необходимо встроить веб-компонент

import { QWebComponentModule } from '@diasoft/qpalette-visual';
...
@NgModule({
  imports:[
    QWebComponentModule
  ]
})

Встройте компонент:

endpoint: QEndpoint = { service: 'qpalettedocui', component: 'my-awesome-web-component', route: '', caption: '', };

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

Передача параметров при загрузке веб-компонента

Интерфейс QEndpoint предполагает наличие параметров веб-компонента. Они могут быть любыми и будут переданы при загрузке веб-компонента. Для передачи этих параметров используйте полеproperties:

const endpoint: QEndpoint = {
  service: 'qpalettedocui',
  component: 'my-awesome-web-component',
  caption: '',
  properties: {
    hello: 'world'
  }
};

Для получения этих параметров внутри веб-компонента, используйте геттерQWebComponentModule.endpoint:

import { QWebComponentModule } from '@diasoft/qpalette-visual';
 
@Injectable()
export class SomeService {
 
  getPbcProperties (): { [k:string]: any } | undefined {
    return QWebComponentModule.endpoint?.properties;
  }
 
}

Передача событий

Передача событий с помощью свойства data

Пример ниже описывает возможность передачи событий во встраиваемый веб-компонент с помощью свойства data:

import { QEndpoint, QEventsContract } from '@diasoft/qpalette-visual'; data: QEventsContract<any> = { name:
'my-custom-event', payload: { some: 'data', } };

Передача с помощью сервиса QEventsService

Передача с помощью QEventsService осуществляется следующим способом:

import { QEndpoint, QEventsContract, QEventsService } from '@diasoft/qpalette-visual'; constructor(private readonly
qEventsService: QEventsService) {} sendData(): void { this.qEventsService.customEvent({ name: 'my-custom-event',
payload: { some: 'data', } }); }

Получение событий

Также как и с отправкой, существует два способа получать события из встраиваемого веб-компонента. Рассмотрим их ниже:

Получение событий с помощью свойства events

Код ниже демонстрирует возможность получения событий с помощью свойства events:##### Получение событий с помощью сервиса QEventsService

Пример ниже демонстрирует возможность получения событий с помощью сервиса QEventsService:

Возможные ошибки

• Ошибок нет, но веб-компонент не отображается.

  Веб-компонент не приведён к формату Q.Palette. Преобразуйте его с помощью инструкции выше.

• NullInjectorError: R3InjectorError[QWebComponentService...

  В AppModule родительского приложения не указана конфигурация bundleUrl QWebComponentModule.forRoot(bundleUrl: '/api/$service/$component/main.js' ),

• If 'q-web-component' is an Angular component....

  В модуле, куда встраивается веб-компонент, не импортирован QWebComponentModule.