Вопрос или проблема
Как добавить компонент Angular внутри блока GrapesJS
WebBuilderComponent
export class WebBuilderComponent implements OnInit {
@ViewChild('editor', { static: true }) editorRef!: ElementRef;
constructor(@Inject(PLATFORM_ID) private platformId: Object) {}
ngOnInit() {
if (isPlatformBrowser(this.platformId)) {
const editor = grapesjs.init({
container: '#gjs',
fromElement: true,
height: '100%',
width: '100%',
storageManager: { autoload: false },
plugins: ['gjs-custom-code', 'gjs-plugin-ckeditor'],
blockManager: {
appendTo: '#blocks',
blocks: [
{
id: 'empty-mobile-container',
label: '<b>Пустой мобильный контейнер</b>',
attributes: { class: 'gjs-block-mobile-container' },
content: `<section><app-text></app-text></section>`,
category: 'Мобильные блоки',
},
{
id: 'section', // id является обязательным
label: '<b>Секция</b>', // Вы можете использовать HTML/SVG внутри заголовков
attributes: { class:'gjs-block-section' },
content: `<section>
<h1>Это простой заголовок</h1>
<div>Это просто текст Lorem: Lorem ipsum dolor sit amet</div>
</section>`,
category: 'Мобильные блоки',
},
{
id: 'text',
label: 'Текст',
content: '<div data-gjs-type="text">Вставьте ваш текст здесь</div>',
}, {
id: 'image',
label: 'Изображение',
// Выберите компонент после его добавления
select: true,
// Вы можете передать компоненты в формате JSON вместо простой HTML-строки,
// в этом случае мы также используем определенный тип компонента `image`
content: { type: 'image' },
// Это вызывает событие `active` на добавленных компонентах и `image`
// реагирует, открывая AssetManager
activate: true,
}
]
},
});
editor.setDevice('Мобильный портрет');
}
}
}
Здесь я вызываю компонент
{
id: 'empty-mobile-container',
label: '<b>Пустой мобильный контейнер</b>',
attributes: { class: 'gjs-block-mobile-container' },
content: `<section><app-text></app-text></section>`,
category: 'Мобильные блоки',
},
Представленный выше код – это код моего пользовательского компонента, в котором я использовал grapesJs, и после этого этот компонент был отрисован в моем appComponent.
Теперь, как вы видите в содержимом, я хочу рендерить свой angular компонент, но это не работает, и я хочу понять, как я могу использовать свой пользовательский компонент в этом.
Таким образом, заключение состоит в том, что я хочу рендерить angular компонент в GrapesJs блоке.
Мне будет огромной помощью, если я смогу достичь этой функциональности. Заранее спасибо за ваше время и усилия по предоставлению решений.
Ответ или решение
Чтобы включить Angular компонент в блок GrapesJS, вам нужно следовать нескольким шагам, поскольку GrapesJS на самом деле работает с HTML, а Angular компоненты требуют специфической обработки. Вот пошаговое руководство, как это сделать:
Шаг 1: Определите ваш Angular компонент
Сначала убедитесь, что ваш Angular компонент правильно настроен. Например, компонент app-text может выглядеть так:
import { Component } from '@angular/core';
@Component({
selector: 'app-text',
template: `<div>Это текст из Angular компонента!</div>`,
})
export class TextComponent {}Шаг 2: Настройте GrapesJS для поддержки Angular компонентов
В вашем коде вы уже определили блок с кодом <app-text></app-text>. Однако GrapesJS не сможет сам интерпретировать этот код как Angular компонент. Вам нужно будет использовать механизм, чтобы пересоздать или инициализировать Angular компонент в GrapesJS.
Шаг 3: Использование render метода
Когда ваш блок добавляется в дизайн, вы можете создать render метод, чтобы инициализировать ваш Angular компонент. Например, вы можете сделать это в вашем компоненте WebBuilderComponent:
const editor = grapesjs.init({
// Ваши другие настройки
blockManager: {
appendTo: '#blocks',
blocks: [
{
id: 'empty-mobile-container',
label: '<b>Empty Mobile Container</b>',
attributes: { class: 'gjs-block-mobile-container' },
content: `<section><app-text></app-text></section>`,
category: 'Mobile Blocks',
render: () => {
const element = document.createElement('app-text');
// Нужно явно указать, чтобы Angular обработал данный элемент
const appRef = this.injector.get(ApplicationRef);
appRef.bootstrap(TextComponent, element);
return element;
}
},
// Другие блоки...
]
},
});Шаг 4: Настроить Angular для работы с динамическими компонентами
Убедитесь, что ваш Angular проект настроен для поддержки динамической загрузки компонентов. Если вы используете Angular CLI, вам нужно добавить ваши компоненты в entryComponents массива в вашем модуле:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { TextComponent } from './text.component';
@NgModule({
declarations: [
// Другие компоненты...
TextComponent
],
imports: [
BrowserModule,
// Другие модули...
],
entryComponents: [TextComponent], // Добавьте сюда ваш компонент
bootstrap: [AppComponent]
})
export class AppModule {}Шаг 5: Генерация обязательного HTML кода
После того, как вы добавили поддержку Angular для вашего блока, убедитесь, что при его редактировании правильно генерируется HTML код. GrapesJS должен создавать правильный HTML для вашего Angular компонента.
Заключение
После выполнения всех шагов, когда вы перетаскиваете ваш блок "Empty Mobile Container" из панели блоков, ваш Angular компонент должен корректно рендериться на странице. Учтите, что вам может понадобиться дополнительные настройки в зависимости от структуры вашего приложения и специфики используемых компонентов.
При возникновении дополнительных трудностей, желательно рассмотреть использование специального модуля или библиотеки для интеграции GrapesJS с Angular для упрощения процесса.