대시 보드 앱을위한 Angular 7 다중 라우터 아울렛

debugcn 에 게시 Dev

Rk R 바 이리

홈, 대시 보드, 요청 양식을 표시 할 수있는 기본 콘센트가 있습니다.

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.

Dimanoid

내가 당신을 옳게 이해했다면 당신은 어떻게 든 차트 / 테이블 로 이동할 계획이 없기 때문에 중첩 된 콘센트 / 하위 경로가 필요하지 않습니다 . 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] 삭제

에서 수정2021-04-5

몇 마디 만하겠습니다

0리뷰

로그인참여 후 검토

Related 관련 기사

기사