Dynami c Содержимое, предоставляемое компонентом в материале Sidenav Правое меню - PullRequest
0 голосов
/ 17 апреля 2020

Я внедрил правое наложение меню в шаблон, который уже использует левую навигацию с использованием материалов sidenavs. Мне потребовался дополнительный sidenav для редактирования контента, который скользит справа. Это объявлено в app.component, и я добавил сервис, который позволяет мне открывать правильные sidenav из любого компонента, информируя app.component для переключения состояния sidenav. Вот как это выложено в app.component:

 <mat-sidenav-container>


  <mat-sidenav #appDrawer mode="{{ mode }}" opened="{{ opened }}"
    disableClose={{disableClose}} position="start" 
    (openedChange)="navStateChangeEmit($event)">

    left navigation menu content

  </mat-sidenav>


  <!-- Right Hand overlay menu -->
  <mat-sidenav  #appDrawerRH mode="over" opened="{{openedRmenu}}"
  position="end" (openedChange)="r_navStateChangeEmit($event)">

  Right Menu content here

  </mat-sidenav>

  <mat-sidenav-content class="main-content">
  </mat-sidenav-content>
</mat-sidenav-container>

Мне нужно, чтобы эта правая рука sidenav была многоцелевой и чтобы компонент, который ее открывает, решал, какой контент / форма отображается в нем. , Я не уверен, как go о создании этого.

1 Ответ

1 голос
/ 20 апреля 2020

Хорошо, я собрал пример того, как Stackblitz делает то, что я говорю ниже.

1 - Создайте сервис для управления тем, что должно отображаться на правой панели:

@Injectable({ providedIn: "root" })
export class SidenavRightPanelContentService {
  private _componentPortal$ = 
    new BehaviorSubject<ComponentPortal<any> | null>(null);

  getComponentPortal$() {return this._componentPortal$.asObservable();}

  setComponentPortal(component: ComponentType<any>) {
    this._componentPortal$.next(new ComponentPortal<any>(component));
  }
}

2 - Подготовьте выход портала на этой панели и примите порталы компонентов.

Кроме того, в примере я поместил несколько кнопок для иллюстрации использования:

<mat-sidenav-container class="example-container">
    <mat-sidenav opened mode="side">Start content</mat-sidenav>
    <mat-sidenav #rightSideNav="matSidenav" mode="over" position="end">
        <div class="container">
            <ng-template [cdkPortalOutlet]="_rightSideComponentPortal$ | async"></ng-template>
        </div>
    </mat-sidenav>
    <button (click)="_loadComponent1()" mat-raised-button color="primary">Load Component 1</button>
    <button (click)="_loadComponent2()" mat-raised-button color="warn">Load Component 2</button>
</mat-sidenav-container>

3 - Подготовьте класс машинописи хоста Sidenav для отображения нужного компонента

Тестовые компоненты (AppComp1Component и AppComp2Component) - это те, которые вы хотите динамически отображать на правой панели sidenav.

private _rightSideNav: MatSidenav;
@ViewChild(MatSidenavContainer) _snc: MatSidenavContainer;

_rightSideComponentPortal$ = this._sn.getComponentPortal$().pipe(
  tap((_) => _ ? this._rightSideNav.open() : null),
);

constructor(public _sn: SidenavRightPanelContentService) {}

ngAfterViewInit() {this._rightSideNav = this._snc.end as MatSidenav;}

_loadComponent1() {this._sn.setComponentPortal(AppComp1Component);}

_loadComponent2() {this._sn.setComponentPortal(AppComp2Component);}

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...