Pola Portal Angular: Mengapa Anda Membutuhkan Komponen Root di Taiga UI

Rekan saya Roman baru-baru ini mengumumkan peluncuran pustaka komponen baru kami untuk Angular Taiga UI. Petunjuk Memulai mengatakan bahwa aplikasi perlu dibungkus dalam file tui-root



. Mari kita cari tahu apa fungsinya, cari tahu bagaimana dan mengapa kita menggunakan portal dan apa itu secara umum.

Apa itu portal?

Bayangkan sebuah komponen select



. Ini memiliki dropdown dengan opsi untuk dipilih. Jika Anda menyimpannya di tempat yang sama di DOM sebagai komponen itu sendiri, Anda bisa mengalami sejumlah masalah. Elemen hilir dapat muncul di atas, dan penampung dapat memotong konten:

z-index



, Z . 100, 10000, 10001. , overflow: hidden



. ?

. z-index



. «». Root- Taiga UI . :

<tui-scroll-controls></tui-scroll-controls>
<tui-portal-host>
    <div class="content"><ng-content></ng-content></div>
    <tui-dialog-host></tui-dialog-host>
    <ng-content select="tuiOverDialogs"></ng-content>
    <tui-notifications-host></tui-notifications-host>
    <ng-content select="tuiOverNotifications"></ng-content>
</tui-portal-host>
<ng-content select="tuiOverPortals"></ng-content>
<tui-hints-host></tui-hints-host>
<ng-content select="tuiOverHints"></ng-content>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

tui-dialog-host



, tui-portal-host



— . -. . Taiga UI . . :

@Injectable({
   providedIn: 'root',
})
export class TuiPortalService {
   private host: TuiPortalHostComponent;

   add<C>(componentFactory: ComponentFactory<C>, injector: Injector): ComponentRef<C> {
       return this.host.addComponentChild(componentFactory, injector);
   }

   remove<C>({hostView}: ComponentRef<C>) {
       hostView.destroy();
   }

   addTemplate<C>(templateRef: TemplateRef<C>, context?: C): EmbeddedViewRef<C> {
       return this.host.addTemplateChild(templateRef, context);
   }

   removeTemplate<C>(viewRef: EmbeddedViewRef<C>) {
       viewRef.destroy();
   }
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

. , , — . , , .

, - . , «», .

, . :

1. . Material .

   
   
   
   
   

2. , . .

   
   
   
   
   

3. .

   
   
   
   
   

. , . , requestAnimationFrame



. — , . . , . , . , . .

: 

— . Obscured. .

, . , .

:

<section
   *ngFor="let item of dialogs$ | async"
   polymorpheus-outlet
   tuiFocusTrap
   tuiOverscroll="all"
   class="dialog"
   role="dialog"
   aria-modal="true"
   [attr.aria-labelledby]="item.id"
   [content]="item.component"
   [context]="item"
   [@tuiParentAnimation]
></section>
<div class="overlay"></div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

, ngFor



, . , . , . , .

, . Taiga UI — . - iOS Android. . , .

Observable



. , — . . . , , DI- POLYMORPHEUS_CONTEXT



. content



observer



. complete



, , next



. , , . :

const DIALOG = new PolymorpheusComponent(MyDialogComponent);
const DEFAULT_OPTIONS: MyDialogOptions = {
   label: '',
   size: 's',
};

@Injectable({
   providedIn: 'root',
})
export class MyDialogService extends AbstractTuiDialogService<MyDialogOptions> {
   protected readonly component = DIALOG;
   protected readonly defaultOptions = DEFAULT_OPTIONS;
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

.

, Taiga UI, ng-polymorpheus . , , , .

tuiFocusTrap



. , DOM, , . - — :

@HostListener('window:focusin.silent', ['$event.target'])
onFocusIn(node: Node) {
   if (containsOrAfter(this.elementRef.nativeElement, node)) {
       return;
   }

   const focusable = getClosestKeyboardFocusable(
       this.elementRef.nativeElement,
       false,
       this.elementRef.nativeElement,
   );

   if (focusable) {
       focusable.focus();
   }
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

root-. root , tuiOverscroll



. CSS- overscroll-behavior. . , , . , , .

: tui-root?

, . , root-. tui-scroll-controls



. , . <ng-content select="tuiOverDialogs"></ng-content>



. Taiga UI. , .

root event manager plugin` DI. — . , TuiRootModule



BrowserModule



, . : — .

, root-. Taiga UI open-source, «» npm. StackBlitz-. , , !