dialog: стилизация, сторисы, обёртки#31
Conversation
| [showHeader]="showHeader" | ||
| [focusOnShow]="focusOnShow" | ||
| [styleClass]="sizeClass" | ||
| appendTo="body" |
There was a problem hiding this comment.
а почему решил не передавать этот пропс?
| @Input() closeOnEscape = true; | ||
| @Input() showHeader = true; | ||
| @Input() focusOnShow = false; | ||
| @Input() footerTemplate: TemplateRef<any> | null = null; |
There was a problem hiding this comment.
а в хедер мы не планируем кастомные шаблоны вставлять?
| import { DialogNoModalComponent } from './examples/dialog-no-modal.component'; | ||
| import { DialogNoHeaderComponent } from './examples/dialog-no-header.component'; | ||
|
|
||
| const meta: Meta<DialogComponent> = { |
There was a problem hiding this comment.
ну увидел использования механизма DynamicDialog. по сути своей это тот же Dialog только вызывается динамически. хотя в целом можно попробовать пожить без него. и если будет неудобно - потом добавить
| import { Component, TemplateRef, ViewChild } from '@angular/core'; | ||
| import { Button } from 'primeng/button'; | ||
| import { DialogComponent } from '@cdek-it/angular-ui-kit'; | ||
|
|
There was a problem hiding this comment.
у тебя на уровне каждого компонента для стори задается переменная template. Думаю её можно экспортировать и также использовать здесь, в source.code.
import {template as dialogBasicTemplate} from '../dialog-default.component.ts';
...
standalone: true,
imports: [DialogComponent, Button],
template: \`
${dialogBasicTemplate}
\`,
})
export class DialogBasicComponent {
@ViewChild('footer') footer!: TemplateRef<any>;
visible = false;
}
...
| [styleClass]="sizeClass" | ||
| [appendTo]="appendTo" | ||
| > | ||
| @if (headerTemplate) { |
There was a problem hiding this comment.
а почему хедер через if, а футер нет?
думаю стоит оба через if сделать
| template, | ||
| }) | ||
| export class DialogDefaultComponent { | ||
| @ViewChild('footer') footer!: TemplateRef<any>; |
There was a problem hiding this comment.
это не обязательно если мы используем блок в шаблоне. то есть когда мы делаем #footer у нас на уровне шаблона появляется переменная footer
| <p-button (onClick)="visible = true" label="Создать заявку"></p-button> | ||
|
|
||
| <ng-template #footer> | ||
| <p-button variant="text" label="Отмена" (onClick)="visible = false"></p-button> |
There was a problem hiding this comment.
тут думаю должны быть наши кнопки, а не праймовские
| selector: 'app-dialog-dynamic', | ||
| standalone: true, | ||
| imports: [Button], | ||
| providers: [DialogService, UiDialogService], |
There was a problem hiding this comment.
на уровне стори мы ничего не должны знать про прайм. потому что стори это как будто бы наши модули, которые мы пишем. то есть наш UiDialogService должен сам уметь провайдить праймовский DialogService под капотом.
…пна из ng-template
…мовский импорт убран из сторис
khaliulin
force-pushed
the
overlay.dialog
branch
from
c2874e6 to
175a7e4
Compare
|
|
||
| @Injectable() | ||
| export class UiDialogService { | ||
| static providers() { |
There was a problem hiding this comment.
А это работает? На первый взгляд как будто не должно, ведь этот метод никем вызываться не будет.
Кажется что лучше пойти через injector
Для референса
// ui-dialog.service.ts
import { Injectable, Injector, ComponentRef } from '@angular/core';
import { DialogService } from 'primeng/dynamicdialog';
@Injectable({ providedIn: 'root' })
export class UiDialogService {
// НЕ инжектим DialogService напрямую в конструктор!
open(component: any, injector: Injector, config?: any) {
// 1. Создаём дочерний инжектор, который содержит провайдер DialogService
const childInjector = Injector.create({
providers: [
DialogService // 👈 Только здесь провайдим DialogService
],
parent: injector
});
// 2. Получаем экземпляр DialogService из этого дочернего инжектора
const dialogService = childInjector.get(DialogService);
// 3. Используем его
return dialogService.open(component, {
header: 'Моя обёртка',
width: '600px',
...config
});
}
}
‘
2 participants
No description provided.