Хорошо, я собрал пример того, как 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
везде, где вы хотите установить компонент, который будет представлен на правой панели. Конечно, вам, вероятно, придется заполнить некоторые пробелы, чтобы сделать его полезным. Он предназначен только для указания некоторых направлений.