рд╕рднреА рдХреЛ рдирдорд╕реНрдХрд╛рд░редрдмрд╣реБрдд рд╕рдордп рдкрд╣рд▓реЗ, рдЕрдЧрд▓рд╛ рд╕реНрдкреНрд░рд┐рдВрдЯ рд╕рдорд╛рдкреНрдд рдирд╣реАрдВ рд╣реБрдЖ рдерд╛, рдФрд░ рдореЗрд░реЗ рдкрд╛рд╕ рдЕрдкрдиреЗ рдЙрдкрдпреЛрдЧрдХрд░реНрддрд╛рдУрдВ рдХреЗ рд▓рд┐рдП рдмрдирд╛рдиреЗ рдХреЗ рд▓рд┐рдП рдХреБрдЫ рд╕рдордп рдерд╛, рди рдХрд┐ рд╕рдмрд╕реЗ рдЖрд╡рд╢реНрдпрдХ, рд▓реЗрдХрд┐рди рдПрдХ рд╣реА рд╕рдордп рдореЗрдВ рджрд┐рд▓рдЪрд╕реНрдк рд╡рд┐рд╢реЗрд╖рддрд╛ - рд╣рдорд╛рд░реЗ рдЖрд╡реЗрджрди рдХреЗ рд╕рд╛рде рдХрд╛рдо рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдПрдХ рдЗрдВрдЯрд░реИрдХреНрдЯрд┐рд╡ рдЧрд╛рдЗрдбредрдЗрдВрдЯрд░рдиреЗрдЯ рдкрд░ рдмрд╣реБрдд рд╕рд╛рд░реЗ рддреИрдпрд╛рд░ рдХрд┐рдП рдЧрдП рд╕рдорд╛рдзрд╛рди рд╣реИрдВ - рдпреЗ рд╕рднреА рдирд┐рд╢реНрдЪрд┐рдд рд░реВрдк рд╕реЗ рдЗрд╕ рдХрд╛рд░реНрдп рдХреЗ рд▓рд┐рдП рдЙрдкрдпреБрдХреНрдд рд╣реЛ рд╕рдХрддреЗ рд╣реИрдВ, рд▓реЗрдХрд┐рди рд╣рдо рджреЗрдЦреЗрдВрдЧреЗ рдХрд┐ рдЦреБрдж рдХреЛ рдХреИрд╕реЗ рдХрд░рдирд╛ рд╣реИредрдЖрд░реНрдХрд┐рдЯреЗрдХреНрдЪрд░
рдЗрд╕ рдШрдЯрдХ рдХреА рд╡рд╛рд╕реНрддреБрдХрд▓рд╛ рдХрд╛рдлреА рд╕рд░рд▓ рд╣реИредрд╣рдорд╛рд░реЗ рдкрд╛рд╕ DOM рдЯреНрд░реА рдореЗрдВ рдПрдХ рдорд╣рддреНрд╡рдкреВрд░реНрдг рддрддреНрд╡ рд╣реИ рдЬрд┐рд╕реЗ рд╣рдо рдЙрдкрдпреЛрдЧрдХрд░реНрддрд╛ рдХреЛ рдХреБрдЫ рдмрддрд╛рдирд╛ рдЪрд╛рд╣рддреЗ рд╣реИрдВ, рдЙрджрд╛рд╣рд░рдг рдХреЗ рд▓рд┐рдП, рдПрдХ рдмрдЯрдиредрд╣рдореЗрдВ рдЗрд╕ рддрддреНрд╡ рдХреЗ рдЪрд╛рд░реЛрдВ рдУрд░ рдПрдХ рдЕрдВрдзреЗрд░реЗ рдкрд░рдд рдХреЛ рдЖрдХрд░реНрд╖рд┐рдд рдХрд░рдиреЗ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реИ, рдЗрд╕ рдкрд░ рдзреНрдпрд╛рди рдХреЗрдВрджреНрд░рд┐рдд рдХрд░рдирд╛редрдЖрдкрдХреЛ рдПрдХ рдорд╣рддреНрд╡рдкреВрд░реНрдг рд╕рдВрджреЗрд╢ рдХреЗ рд╕рд╛рде рдЗрд╕ рддрддреНрд╡ рдХреЗ рдмрдЧрд▓ рдореЗрдВ рдПрдХ рдХрд╛рд░реНрдб рдЦреАрдВрдЪрдирд╛ рд╣реЛрдЧрд╛ред
рдЗрд╕ рд╕рдорд╕реНрдпрд╛ рдХреЛ рд╣рд▓ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП, @ рдХреЛрдгреАрдп / рд╕реАрдбреАрдХреЗ рд╣рдорд╛рд░реА рдорджрдж рдХрд░реЗрдВрдЧреЗ ред рдЕрдкрдиреЗ рдЖрдЦрд┐рд░реА рд▓реЗрдЦ рдореЗрдВ, рдореИрдВрдиреЗ рдкрд╣рд▓реЗ рд╣реА @ рдХреЛрдгреАрдп / рд╕рд╛рдордЧреНрд░реА рдХреА рдкреНрд░рд╢рдВрд╕рд╛ рдХреА , рдЬреЛ рд╕реАрдбреАрдХреЗ рдкрд░ рдирд┐рд░реНрднрд░ рдХрд░рддрд╛ рд╣реИ, рдореЗрд░реЗ рд▓рд┐рдП рдпрд╣ рдЕрднреА рднреА рдлреНрд░реЗрдорд╡рд░реНрдХ рдХреА рд╕рднреА рд╡рд┐рд╢реЗрд╖рддрд╛рдУрдВ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдХреЗ рдмрдирд╛рдП рдЧрдП рдЙрдЪреНрдЪ-рдЧреБрдгрд╡рддреНрддрд╛ рд╡рд╛рд▓реЗ рдШрдЯрдХреЛрдВ рдХрд╛ рдПрдХ рдЙрджрд╛рд╣рд░рдг рд╣реИредрдореЗрдиреВ, рдбрд╛рдпрд▓реЙрдЧ рдмреЙрдХреНрд╕, @ рдХреЛрдгреАрдп / рд╕рд╛рдордЧреНрд░реА рдкреБрд╕реНрддрдХрд╛рд▓рдп рд╕реЗ рдЯреВрд▓рдмрд╛рд░ рдЬреИрд╕реЗ рдШрдЯрдХрд╕реАрдбреАрдХреЗ рд╕реЗ рдШрдЯрдХ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдХреЗ рдмрдирд╛рдпрд╛ рдЧрдпрд╛ - рдУрд╡рд░рд▓реЗредрдЗрд╕ рдШрдЯрдХ рдХрд╛ рд╕рд░рд▓ рдЗрдВрдЯрд░рдлрд╝реЗрд╕ рдЖрдкрдХреЛ рд╣рдорд╛рд░реЗ рдЖрд╡реЗрджрди рдХреЗ рдКрдкрд░ рдПрдХ рдкрд░рдд рдмрдирд╛рдиреЗ рдХреА рдЕрдиреБрдорддрд┐ рджреЗрддрд╛ рд╣реИ, рдЬреЛ рд╕реНрд╡рддрдВрддреНрд░ рд░реВрдк рд╕реЗ рд╕реНрдХреНрд░реАрди рдЖрдХрд╛рд░ рдФрд░ рд╕реНрдХреНрд░реЙрд▓рд┐рдВрдЧ рдореЗрдВ рдкрд░рд┐рд╡рд░реНрддрди рдХреЗ рдЕрдиреБрдХреВрд▓ рд╣реЛрдЧрд╛ред рдЬреИрд╕рд╛ рдХрд┐ рдЖрдк рдкрд╣рд▓реЗ рд╕реЗ рд╣реА рд╕рдордЭ рдЪреБрдХреЗ рд╣реИрдВ, рд╣рдорд╛рд░реА рд╕рдорд╕реНрдпрд╛ рдХреЛ рд╣рд▓ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдЗрд╕ рдШрдЯрдХ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдирд╛ рдмрд╣реБрдд рд╕рд░рд▓ рд╣реЛ рдЬрд╛рддрд╛ рд╣реИредрд╕рдмрд╕реЗ рдкрд╣рд▓реЗ, рдкреБрд╕реНрддрдХрд╛рд▓рдпреЛрдВ рдХреЛ рд╕реНрдерд╛рдкрд┐рдд рдХрд░реЗрдВnpm i @angular/cdk @angular/material -S
рд╕реНрдерд╛рдкрдирд╛ рдХреЗ рдмрд╛рдж, рд╕реНрдЯрд╛рдЗрд▓ рдХреЛ рд╕реНрдЯрд╛рдЗрд▓ рдореЗрдВ рдЬреЛрдбрд╝рдирд╛ рди рднреВрд▓реЗрдВ@import '~@angular/cdk/overlay-prebuilt.css';
@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
рдЕрдм рд╣рдорд╛рд░реА рдкрд░рд┐рдпреЛрдЬрдирд╛ рдореЗрдВ рдПрдХ рдирдпрд╛ рдореЙрдбреНрдпреВрд▓ рдмрдирд╛рдПрдБ:ng generate library intro-lib
рдФрд░ рддреБрд░рдВрдд рдирд┐рд░реНрджреЗрд╢ рдХреЗ рд▓рд┐рдП рдПрдХ рдЯреЗрдореНрдкрд▓реЗрдЯ рддреИрдпрд╛рд░ рдХрд░реЗрдВ:ng generate directive intro-trigger
рдпрд╣ рдирд┐рд░реНрджреЗрд╢ рд╣рдорд╛рд░реЗ рднрд╡рд┐рд╖реНрдп рдХреЗ рдорд╛рд░реНрдЧрджрд░реНрд╢рдХ рдХреЗ рд▓рд┐рдП рдПрдХ рдЯреНрд░рд┐рдЧрд░ рдХреЗ рд░реВрдк рдореЗрдВ рдХрд╛рд░реНрдп рдХрд░реЗрдЧрд╛, рдПрдХ рддрддреНрд╡ рдкрд░ рдХреНрд▓рд┐рдХреЛрдВ рдХреЛ рд╕реБрдиреЗрдЧрд╛ рдФрд░ рдкреГрд╖реНрда рдкрд░ рдЗрд╕реЗ рдЙрдЬрд╛рдЧрд░ рдХрд░реЗрдЧрд╛ред@Directive({
selector: '[libIntroTrigger]'
})
export class IntroTriggerDirective {
@Input() libIntroTrigger: string;
constructor(private introLibService: IntroLibService, private elementRef: ElementRef) {}
@HostListener('click') showGuideMessage(): void {
this.introLibService.show$.emit([this.libIntroTrigger, this.elementRef]);
}
}
рдпрд╣рд╛рдВ рд╣рдо рдЙрд╕ рд╕реЗрд╡рд╛ рдХреА рдУрд░ рдореБрдбрд╝рддреЗ рд╣реИрдВ рдЬреЛ рдкреБрд╕реНрддрдХрд╛рд▓рдп рдХреЗ рдирд┐рд░реНрдорд╛рдг рдХреЗ рд╕рдордп рднреА рдЙрддреНрдкрдиреНрди рд╣реБрдИ рдереА, рд╕рднреА рдореБрдЦреНрдп рдХрд╛рд░реНрдп рдЙрд╕рдХреЗ рджреНрд╡рд╛рд░рд╛ рдХрд┐рдП рдЬрд╛рдПрдВрдЧреЗредрд╕рдмрд╕реЗ рдкрд╣рд▓реЗ, рд╕реЗрд╡рд╛ рдореЗрдВ рдПрдХ рдирдИ рд╕рдВрдкрддреНрддрд┐ рдШреЛрд╖рд┐рдд рдХрд░реЗрдВshow$ = new EventEmitter<[string, ElementRef]>();
рдЬреИрд╕рд╛ рдХрд┐ рд╣рдордиреЗ рдЗрди рдореВрд▓реНрдпреЛрдВ рдХреЛ рджреЗрдЦрд╛ рд╣реИ, рдирд┐рд░реНрджреЗрд╢ рд╣рдореЗрдВ рднреЗрдЬреЗрдЧрд╛, рд╕рд░рдгреА рдореЗрдВ рдкрд╣рд▓рд╛ рддрддреНрд╡ рд╡рд┐рд╡рд░рдг рд╣реИ, рдФрд░ рджреВрд╕рд░рд╛ рдбреЛрдо рддрддреНрд╡ рд╣реИ рдЬрд┐рд╕реЗ рд╣рдо рд╡рд░реНрдгрди рдХрд░рддреЗ рд╣реИрдВ (рдореИрдВрдиреЗ рдЙрджрд╛рд╣рд░рдг рдХреА рд╕рд╛рджрдЧреА рдХреЗ рд▓рд┐рдП рдЗрд╕ рд╕рдорд╛рдзрд╛рди рдХреЛ рдЪреБрдирд╛)ред@Injectable({
providedIn: 'root'
})
export class IntroLibService {
private overlayRef: OverlayRef;
show$ = new EventEmitter<[string, ElementRef]>();
constructor(private readonly overlay: Overlay, private readonly ngZone: NgZone, private readonly injector: Injector) {
this.show$.subscribe(([description, elementRef]: [string, ElementRef]) => {
this.attach(elementRef, description);
});
}
}
EventEmitter рд╕реЗ рдЕрдкрдбреЗрдЯ рдХреЗ рд▓рд┐рдП рдПрдХ рд╕рджрд╕реНрдпрддрд╛ рдЬреЛрдбрд╝рдХрд░ рд╕реЗрд╡рд╛ рдбрд┐рдЬрд╛рдЗрдирд░ рдХреЛ рдЕрдкрдбреЗрдЯ рдХрд░реЗрдВ, рдЕрдЯреИрдЪ рдлрд╝рдВрдХреНрд╢рди рдЕрдкрдбреЗрдЯ рдкреНрд░рд╛рдкреНрдд рдХрд░реЗрдЧрд╛ рдФрд░ рдкрд░рддреЗрдВ рдмрдирд╛рдПрдЧрд╛редрд▓реЗрдпрд░ рдмрдирд╛рдиреЗ рдХреЗ рд▓рд┐рдП рд╣рдореЗрдВ Overlay, Injector рдФрд░ NgZone рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реЛрддреА рд╣реИредрдирд┐рдореНрдирд▓рд┐рдЦрд┐рдд рдХреНрд░рд┐рдпрд╛рдУрдВ рдХреЛ рдХрдИ рдЪрд░рдгреЛрдВ рдореЗрдВ рд╡рд┐рднрд╛рдЬрд┐рдд рдХрд┐рдпрд╛ рдЬрд╛ рд╕рдХрддрд╛ рд╣реИ:- рд╡рд░реНрддрдорд╛рди рдУрд╡рд░рд▓реЗ рдмрдВрдж рдХрд░реЗрдВ (рдпрджрд┐ рдХреЛрдИ рд╣реЛ)
- рд╕реНрдерд┐рддрд┐ рдмрдирд╛рдирд╛
- рдУрд╡рд░рд▓реЗ рд░реАрдл рдмрдирд╛рдПрдВ
- PortalInjector рдмрдирд╛рдПрдБ
- рдПрдХ рдШрдЯрдХ рдХреЛ рдПрдХ рдкрд░рдд рдореЗрдВ рд╕рдВрд▓рдЧреНрди рдХрд░реЗрдВ
рдкрд╣рд▓реЗ рдмрд┐рдВрджреБрдУрдВ рдХреЗ рд╕рд╛рде рдпрд╣ рд╕реНрдкрд╖реНрдЯ рд╣реИ, рдЗрд╕рдХреЗ рд▓рд┐рдП рд╣рдордиреЗ рдкрд╣рд▓реЗ рд╣реА рд╕реЗрд╡рд╛ рдореЗрдВ рд╕рдВрдкрддреНрддрд┐ рдХреА рдШреЛрд╖рдгрд╛ рдХрд░ рджреА рд╣реИред рдкреЛрдЬреАрд╢рдирд╕реНрдЯреНрд░реИрдЯреЗ - рдбреЛрдо рдЯреНрд░реА рдореЗрдВ рд╣рдорд╛рд░реА рдкрд░рдд рдХреИрд╕реЗ рддреИрдирд╛рдд рд╣реЛрдЧреА, рдЗрд╕рдХреЗ рд▓рд┐рдП рдЬрд┐рдореНрдореЗрджрд╛рд░ рд╣реИредрдХрдИ рддреИрдпрд╛рд░ рд░рдгрдиреАрддрд┐рдпрд╛рдБ рд╣реИрдВ:- FlexibleConnectedPositionStrategy
- GlobalPositionStrategy
рд╕рд░рд▓ рд╢рдмреНрджреЛрдВ рдореЗрдВ, рдлрд┐рд░FlexibleConnectedPositionStrategy - рдПрдХ рд╡рд┐рд╢рд┐рд╖реНрдЯ рддрддреНрд╡ рдХрд╛ рдкрд╛рд▓рди рдХрд░реЗрдЧрд╛ рдФрд░, рдХреЙрдиреНрдлрд╝рд┐рдЧрд░реЗрд╢рди рдХреЗ рдЖрдзрд╛рд░ рдкрд░, рдпрд╣ рдмреНрд░рд╛рдЙрдЬрд╝рд░ рдпрд╛ рд╕реНрдХреНрд░реЙрд▓ рдХрд╛ рдЖрдХрд╛рд░ рдмрджрд▓рдиреЗ рдкрд░ рдЙрд╕ рдкрд░ рдЪрд┐рдкрдХрд╛ рд░рд╣реЗрдЧрд╛, рдбреНрд░реЙрдк-рдбрд╛рдЙрди рд╕реВрдЪрд┐рдпреЛрдВ, рдореЗрдиреВ рдХреЗ рдЙрдкрдпреЛрдЧ рдХрд╛ рдПрдХ рд╕реНрдкрд╖реНрдЯ рдЙрджрд╛рд╣рд░рдгредGlobalPositionStrategy - рдЬреИрд╕рд╛ рдХрд┐ рдирд╛рдо рдХрд╣рддрд╛ рд╣реИ, рдпрд╣ рд╡рд┐рд╢реНрд╡ рд╕реНрддрд░ рдкрд░ рдмрдирд╛рдпрд╛ рдЧрдпрд╛ рд╣реИ, рдЗрд╕реЗ рдХрд╛рдо рдХреЗ рд▓рд┐рдП рдХрд┐рд╕реА рднреА рддрддреНрд╡ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рдирд╣реАрдВ рд╣реИ, рдЙрдкрдпреЛрдЧ рдХрд╛ рдПрдХ рд╕реНрдкрд╖реНрдЯ рдЙрджрд╛рд╣рд░рдг рдореЛрдбрд▓ рд╡рд┐рдВрдбреЛрдЬрд╝ рд╣реИредрдЬрд╛рдВрдЪ рдХреЗ рддрд╣рдд рддрддреНрд╡ рдХреЗ рдЖрд╕рдкрд╛рд╕ рдПрдХ рдЕрд╕реНрдерд╛рдпреА рд╡рд┐рдВрдбреЛ рд░рдгрдиреАрддрд┐ рдмрдирд╛рдиреЗ рдХреЗ рд▓рд┐рдП рдПрдХ рд╡рд┐рдзрд┐ рдЬреЛрдбрд╝реЗрдВред{
...
private getPositionStrategy(elementRef: ElementRef): PositionStrategy {
return this.overlay
.position()
.flexibleConnectedTo(elementRef)
.withViewportMargin(8)
.withGrowAfterOpen(true)
.withPositions([
{
originX: 'start',
originY: 'bottom',
overlayX: 'start',
overlayY: 'top'
},
{
originX: 'start',
originY: 'top',
overlayX: 'start',
overlayY: 'bottom'
},
{
originX: 'end',
originY: 'bottom',
overlayX: 'end',
overlayY: 'top'
},
{
originX: 'end',
originY: 'top',
overlayX: 'end',
overlayY: 'bottom'
}
]);
}
...
}
OverlayRef рдмрдирд╛рдиреЗ рдХреЗ рд▓рд┐рдП рдПрдХ рд╡рд┐рдзрд┐ рдЬреЛрдбрд╝реЗрдВcreateOverlay(elementRef: ElementRef): OverlayRef {
const config = new OverlayConfig({
positionStrategy: this.getPositionStrategy(elementRef),
scrollStrategy: this.overlay.scrollStrategies.reposition()
});
return this.overlay.create(config);
}
рдФрд░ рдкрд░рдд рдореЗрдВ рд╣рдорд╛рд░реЗ рдШрдЯрдХ рдХреЛ рдмрд╛рдВрдзрдиреЗ рдХреЗ рд▓рд┐рдП рдПрдХ рд╡рд┐рдзрд┐ рдЬреЛрдбрд╝реЗрдВ: attach(elementRef: ElementRef, description: string): void {
if (this.overlayRef && this.overlayRef.hasAttached()) {
this.overlayRef.dispose();
}
this.overlayRef = this.createOverlay(elementRef);
const dataRef = this.ngZone.run(
() => new DataRef(this.overlay, this.injector, this.overlayRef, elementRef, description)
);
const injector = new PortalInjector(this.injector, new WeakMap([[DATA_TOKEN, dataRef]]));
dataRef.overlayRef.attach(new ComponentPortal(IntroLibComponent, null, injector));
}
рдЗрд╕ рддрд░рд╣ рд╕реЗ рд╕рдВрджреЗрд╢ рджрд┐рдЦрд╛рдиреЗ рд╡рд╛рд▓рд╛ рдШрдЯрдХ рдХреИрд╕рд╛ рджрд┐рдЦрддрд╛ рд╣реИ@Component({
selector: 'lib-intro-lib',
template: `
<mat-card>
<mat-card-content> {{ data.description }}</mat-card-content>
</mat-card>
`,
styles: ['mat-card {width: 300px; margin: 32px;}']
})
export class IntroLibComponent {
constructor(@Inject(DATA_TOKEN) public data: DataRef) {}
}
рдкрд╣рд▓реЗ рд╕реЗ рд╣реА рдЙрди рд╕рднреА рдЪреАрдЬрд╝реЛрдВ рдХреЗ рдмрд╛рд░реЗ рдореЗрдВ рдмрддрд╛рдпрд╛ рдЧрдпрд╛ рд╣реИ рдЬреЛ рдбреЗрдЯрд╛рдлрд╝рд╛рдпрд░ рдХреЛ рдЫреЛрдбрд╝рдХрд░, рд▓рд┐рд╕реНрдЯрд┐рдВрдЧ рдореЗрдВ рдкрд░рд┐рдгрдд рд╣реЛрддреА рд╣реИрдВредDataRef рдПрдХ рд╕рд╛рдзрд╛рд░рдг рд╡рд░реНрдЧ рд╣реИ рдЬрд┐рд╕реЗ рд╣рдо рдШрдЯрдХреЛрдВ рдХреЗ рд▓рд┐рдП рдЗрдВрдЬреЗрдХреНрдЯрд░ рдореЗрдВ рдЬреЛрдбрд╝рддреЗ рд╣реИрдВ, рд╡рд╛рд╕реНрддрд╡ рдореЗрдВ, рдкреНрд░рддрд┐рдкрд╛рджрди рдХреЗ рд▓рд┐рдП рдбреЗрдЯрд╛ рд╕реНрдерд╛рдирд╛рдВрддрд░рд┐рдд рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП - рдЙрджрд╛рд╣рд░рдг рдХреЗ рд▓рд┐рдП, рдПрдХ рд╡рд┐рд╡рд░рдгредрдЗрд╕рдХреЗ рдЕрд▓рд╛рд╡рд╛, рдЗрд╕рдореЗрдВ рдореИрдВрдиреЗ рддрддреНрд╡ рдХреЛ рдЧрд╣рд░рд╛ рдХрд░рдиреЗ рдФрд░ рдЙрдЬрд╛рдЧрд░ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдПрдХ рдФрд░ рдкрд░рдд рдЦреАрдВрдЪрдиреЗ рдХрд╛ рдлреИрд╕рд▓рд╛ рдХрд┐рдпрд╛ред рдЗрд╕ рдорд╛рдорд▓реЗ рдореЗрдВ, рд╣рдо рдкрд╣рд▓реЗ рд╕реЗ рд╣реА рд╡реИрд╢реНрд╡рд┐рдХ рдкрд░рдд рдирд┐рд░реНрдорд╛рдг рд░рдгрдиреАрддрд┐ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░реЗрдВрдЧреЗредexport class DataRef {
shadowOverlayRef: OverlayRef;
constructor(
private overlay: Overlay,
private injector: Injector,
public overlayRef: OverlayRef,
public elementRef: ElementRef,
public description: string
) {
const config = new OverlayConfig({
positionStrategy: this.overlay.position().global(),
scrollStrategy: this.overlay.scrollStrategies.block()
});
this.shadowOverlayRef = this.overlay.create(config);
this.shadowOverlayRef.attach(
new ComponentPortal(
ShadowOverlayComponent,
null,
new PortalInjector(this.injector, new WeakMap([[DATA_TOKEN, this.elementRef]]))
)
);
}
}
ShadowOverlayComponent - рдПрдХ рдШрдЯрдХ рдХреЛ рдЦреАрдВрдЪрддрд╛ рд╣реИ, рдФрд░ рдЗрдВрдЬреЗрдХреНрдЯрд░ рдореЗрдВ рдПрдХ рд╣реА рдЯреЛрдХрди рдкреНрд░рд╛рдкреНрдд рдХрд░рддрд╛ рд╣реИ, рдХреЗрд╡рд▓ рдЙрд╕ рддрддреНрд╡ рдХреЗ рд╕рд╛рде рдЬрд┐рд╕рдХреЗ рдЪрд╛рд░реЛрдВ рдУрд░ рдЖрдкрдХреЛ рдЬреЛрд░ рджреЗрдиреЗ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реЛрддреА рд╣реИредрдореИрдВрдиреЗ рдЗрд╕реЗ рдХреИрд╕реЗ рд▓рд╛рдЧреВ рдХрд┐рдпрд╛, рдЖрдк рдЬреАрдереВрдм рдкрд░ рд╕реВрддреНрд░реЛрдВ рдореЗрдВ рджреЗрдЦ рд╕рдХрддреЗ рд╣реИрдВ , рдореИрдВ рдЗрд╕ рдкрд░ рдЕрд▓рдЧ рд╕реЗ рдзреНрдпрд╛рди рдирд╣реАрдВ рджреЗрдирд╛ рдЪрд╛рд╣рддрд╛редрдореИрдВ рд╕рд┐рд░реНрдл рдпрд╣ рдХрд╣реВрдВрдЧрд╛ рдХрд┐ рдореИрдВ рдХреИрдирд╡рд╛рд╕ рдХреЛ рдкреВрд░реНрдг рд╕реНрдХреНрд░реАрди рдЦреАрдВрдЪрддрд╛ рд╣реВрдВ, рддрддреНрд╡ рдХреЗ рдЪрд╛рд░реЛрдВ рдУрд░ рдПрдХ рдЖрдХреГрддрд┐ рдЦреАрдВрдЪрддрд╛ рд╣реВрдВ, рдФрд░ рд╕рдВрджрд░реНрдн рдХреЛ рднрд░рдг ('рд╕рдорд░реВрдк') рд╡рд┐рдзрд┐ рд╕реЗ рднрд░рддрд╛ рд╣реВрдВ;рд╕рдВрдкреВрд░реНрдг
рд╕рдмрд╕реЗ рдЕрдЪреНрдЫреА рдмрд╛рдд рдпрд╣ рд╣реИ рдХрд┐ @ рдХреЛрдгреАрдп / рд╕реАрдбреАрдХреЗ / рдУрд╡рд░рд▓реЗ рд╣рдореЗрдВ рдЬрд┐рддрдиреА рдЪрд╛рд╣реЗрдВ рдЙрддрдиреА рдкрд░рддреЗрдВ рдЦреАрдВрдЪрдиреЗ рдХреА рдЕрдиреБрдорддрд┐ рджреЗрддрд╛ рд╣реИред рд╡реЗ рдЕрдиреБрдХреВрд▓реА рдФрд░ рд▓рдЪреАрд▓реЗ рд╣реЛрдВрдЧреЗред рд╣рдореЗрдВ рд╕реНрдХреНрд░реАрди рдЖрдХрд╛рд░ рдмрджрд▓рдиреЗ рдХреЗ рдмрд╛рд░реЗ рдореЗрдВ рдЪрд┐рдВрддрд╛ рдХрд░рдиреЗ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рдирд╣реАрдВ рд╣реИ, рдпрд╛ рддрддреНрд╡ рдХреБрдЫ рдкреНрд░рд╛рдХреГрддрд┐рдХ рдХрд╛рд░рдгреЛрдВ рд╕реЗ рд╕реНрдерд╛рдирд╛рдВрддрд░рд┐рдд рд╣реЛ рдЬрд╛рдПрдВрдЧреЗ, рдУрд╡рд░рд▓реЗ рд╣рдорд╛рд░реЗ рд▓рд┐рдП рдЗрд╕рдХреЗ рдмрд╛рд░реЗ рдореЗрдВ рд╕реЛрдЪреЗрдВрдЧреЗредрд╣рдо рд╕рдордЭ рдЧрдП рдХрд┐ рдкрд░рддреЛрдВ рдХреЗ рд╕рд╛рде рдХреИрд╕реЗ рдХрд╛рдо рдХрд┐рдпрд╛ рдЬрд╛рдП, рд╣рдордиреЗ рдорд╣рд╕реВрд╕ рдХрд┐рдпрд╛ рдХрд┐ рдЪрд░рдг-рджрд░-рдЪрд░рдг рдорд╛рд░реНрдЧрджрд░реНрд╢рд┐рдХрд╛ рдмрдирд╛рдиреЗ рдХрд╛ рдХрд╛рд░реНрдп рдЗрддрдирд╛ рдХрдард┐рди рдирд╣реАрдВ рд╣реИредрдЖрдк рддрддреНрд╡реЛрдВ рдХреЗ рдмреАрдЪ рд╕реНрд╡рд┐рдЪ рдХрд░рдиреЗ рдХреА рдХреНрд╖рдорддрд╛ рдХреЛ рдЬреЛрдбрд╝рдиреЗ, рд╡реНрдпреВ рдореЛрдб рд╕реЗ рдмрд╛рд╣рд░ рдирд┐рдХрд▓рдиреЗ рдФрд░ рдХрдИ рдЕрдиреНрдп рдХреЛрдиреЗ рдХреЗ рдорд╛рдорд▓реЛрдВ рдореЗрдВ рд▓рд╛рдЗрдмреНрд░реЗрд░реА рдХреЛ рд╕рдВрд╢реЛрдзрд┐рдд рдХрд░ рд╕рдХрддреЗ рд╣реИрдВредрдзреНрдпрд╛рди рджреЗрдиреЗ рдХреЗ рд▓рд┐рдП рдЖрдкрдХреЛ рдзрдиреНрдпрд╡рд╛рджред