각도 재료 SideNav 컨텐츠 전략

Question

은 내가 콘텐츠 영역으로 그 두 번째 sidenav를 사용하려면이

<mat-sidenav-container> 

    <mat-toolbar></mat-toolbar> 

    <router-outlet></router-outlet> 

    <mat-sidenav></mat-sidenav> 
    <mat-sidenav position="end"></mat-sidenav> 

</mat-sidenav-container> 

의 라인을 따라 표준 sidenav 레이아웃을 가지고있다.

이 프로젝트에서 모든 활성 경로는 단순히 캔버스 영역이있는 구성 요소 및 "실험"에 대한 몇 가지 기본 정보입니다. 아마도 기본적인 형태의 슬라이더 나 컨트롤 일 것입니다.

<div> 
    Some Content 
<div> 
<canvas> 
</canvas> 

기본적으로 콘텐츠 div가 두 번째 sidenav 컨테이너에 들어가기를 원합니다. Canvas 만 실제 구성 요소의 자식입니다.

<mat-sidenav-container> 

    <mat-toolbar></mat-toolbar> 

    <router-outlet> 
     <canvas-component> 
      <canvas></canvas> 
     </canvas-component> 
    </router-outlet> 

    <mat-sidenav></mat-sidenav> 
    <mat-sidenav position="end"> 
     <div> 
      Some Content 
     <div> 
    </mat-sidenav> 

</mat-sidenav-container> 

이것은 미친 듯하다. 나는이 방법으로 부모 구조에 의존해야한다고 생각하지 않는다. 알 겠어. 구성 요소가 sidenav를 추가하는 것이 반대의 경우는 훨씬 좋지만 sidenav는 sidenav 컨테이너에 속해야하므로이 구성 요소의 경계를 벗어납니다.

그래서 최상의 전략은 무엇입니까? 나는 주위에 내 머리를 얻을 수 없습니다. 2 개의 외부 콘센트가 필요하고 서로 공유 할 수 있도록 공유 서비스가 필요한 2 가지 구성 요소로 보시겠습니까? 더 좋은 방법이 있습니까?

Answer 1

내가 제대로 이해한다면 :

1. 만은 "캔버스"sidenav가 <router-outlet>이 있어야합니다.
2. "캔버스"sidenav가 데이터의 다른 구성 요소에 의존하는 경우 해당 논리를 별도의 서비스로 추출해야합니다. 이렇게하면, 당신의 "canvas"sidenav는 독립적으로 그것으로부터 데이터를 얻을 수 있습니다.
3. 템플릿에 2 개의 다른 콘센트가 필요하다면 aux routing을 사용하십시오. 기본 콘텐트 영역 (홈페이지)이 정적 인 경우 - 경로를 표시 할 필요가없는 경우 "홈"구성 요소를 사용하십시오 당신의 템플릿 만이 도움이

희망 당신의 "캔버스"sidenav에 <router-outlet>을 유지!