홈, 대시 보드, 요청 양식을 표시 할 수있는 기본 콘센트가 있습니다.
Dashboard는 차트, 표 등 다양한 종류의 타일을 표시하는 갤러리입니다.
대시 보드의 각 타일에있는 콘센트에 차트 또는 표를 표시하고 싶습니다.
여러 타일 인스턴스가 있고 각 타일에 동일한 콘센트가있는 경우 모든 타일이 / tile / chart 또는 / tile / table에 대한 탐색 요청에 응답 할까 봐 걱정됩니다. 각 타일 콘센트를 구분할 수 있어야합니다.
기본 콘센트-> 홈, 대시 보드, 요청.
대시 보드-> 다른 콘센트가있는 타일 구성 요소로 차트 / 목록을 표시합니다.
HomeComponent
<router-outlet></router-outlet> //outlet for dashboard, request
노선 :
{
path: 'dashboard',
component: DashboardComponent //main outlet
},
{
path: 'home',
component: HomeComponent // main outlet
}
대시 보드 구성 요소 :
<Tile> --outlet for chart/table -- </Tile> //Tile 1
<Tile> --outlet for chart/Table -- </Tile> //Tile 2 and so on.
내가 당신을 옳게 이해했다면 당신은 어떻게 든 차트 / 테이블 로 이동할 계획이 없기 때문에 중첩 된 콘센트 / 하위 경로가 필요하지 않습니다 . URL에 따라 콘텐츠를 변경하려는 경우 공통적으로 사용되는 라우팅입니다. 예를 들어 대시 보드에 1 개 이상의 페이지가 있고 사용자가 페이지간에 전환 할 수 있도록합니다. 그런 다음 /dashboard/1
, /dashboard/2
등과 같은 경로가 있어야합니다 .하지만 내가 이해 한 한 동적으로 정의 된 타일 / 위젯이있는 대시 보드를 표시하고 싶습니까? 따라서 표시 할 내용 을 정의 하는 데이터 구조 와 해당 내용을 표시 할 구성 요소 집합 만 있으면됩니다. 1 개의 주요 구성 요소가 있습니다 dashboard
. 경로 /dashboard
와 일부 구성 요소는 각각 1 가지 유형의 타일을 표시합니다. 이 같은:
<div *ngFor="let line of widgetLines; let i = index">
<div *ngFor="let group of line.groups; let j = index">
<div *ngFor="let widget of group.widgets; let k = index">
<ng-container [ngSwitch]="widget.type">
<db-widget-one *ngSwitchCase="1" [data]="widget.data" (onSettingsUpdated)="updateWidget(i, j, k, $event)"></db-widget-one>
<db-widget-two *ngSwitchCase="2" [data]="widget.data" (onSettingsUpdated)="updateWidget(i, j, k, $event)"></db-widget-two>
<db-widget-three *ngSwitchCase="3" [data]="widget.data" (onSettingsUpdated)="updateWidget(i, j, k, $event)"></db-widget-three>
<div *ngSwitchDefault>Unknown widget type: {{widget.type | json}}</div>
</ng-container>
</div>
</div>
</div>
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다