Angular CDK порталы загрузки при смене страницы - PullRequest
Новая
       6

Angular CDK порталы загрузки при смене страницы

0 голосов
/ 10 февраля 2020

У меня есть портал основных компонентов в моем sidenav.

На основе страницы, на которой находится пользователь, мне нужен sidenav, чтобы определить, есть ли доступный портал компонентов на этой странице. Если есть компонентный портал, мне нужно прикрепить его к порталу. Как я могу узнать, есть ли компонент на странице, нажмите и отправьте его на мой хост портала? 

public selectedPortal: Portal<any>;
ngAfterViewInit() {
      **** Find out if there is a portal on the page if there is then create it here*****

      this.componentPortal = new ComponentPortal(***DynamicPortalComponentGoesHERE***);
      this.selectedPortal = this.componentPortal;
      this.title = 'Portal Name';
      this.cdr.detectChanges();
    }

my html

  <mat-sidenav-container fullscreen>
      <mat-sidenav #sidenav mode="push" class="app-sidenav">
          <mat-toolbar class="options-toolbar">          
          <span class="toolbar-filler">{{title}}</span>
          <button mat-icon-button (click)="sidenav.toggle()" class="mat-icon-button sidenav-toggle-button" [hidden]="!sidenav.opened">
            <mat-icon aria-label="Menu" class="material-icons">close</mat-icon>
          </button>
        </mat-toolbar>
        <div  class="margin-left5">    
          <!--************ Your Dynamic Component for the side bar will go here******************************* -->
          <ng-template [cdkPortalOutlet]="selectedPortal"></ng-template>       
        </div>  
        <mat-nav-list>
          <h2 matSubheader> Page </h2>    
          <a *ngFor="let item of navigationList"
          mat-list-item
          class="sidenav-link"
          (click)="sidenav.toggle()"  <---- When clicking a link I need to detect if a component portal exists on the page
          [routerLink]="[item.RouterLink]"
          routerLinkActive="list-item-active">
          <mat-icon matListIcon> {{ item.Icon }} </mat-icon>
          <span class="title" mat-line> {{item.Title}}</span>
        </a>          
        </mat-nav-list>        
      </mat-sidenav>
      <app-header-bar (toggleSidenav)="sidenav.toggle()"></app-header-bar>          
          <router-outlet></router-outlet>   
    </mat-sidenav-container>
...