Angular2에서 활성 경로를 기반으로 어떻게 사이드 바를 변경합니까?

Question

저는 Angular 2 (RC5)와 Typescript를 사용하여 SPA를 쓰고 있습니다. 기본 (Bootstrap 4 Alpha 3 사용) 및 맞춤형 사이드 바를 기본 탐색 모음으로 사용합니다. 여기에 그림입니다 : 여기

의도는 상단 메뉴 바를 사용하여 주 "응용 프로그램"으로 이동하는 것입니다. 현재 나는 Tracker, Proboard 및 Equipment의 세 가지 기본 앱을 매핑했습니다. 메인 애플리케이션이 활성화되면 사이드 바에있는 링크가 변경됩니다. 위의 그림에서 사이드 바에 'Proboard'응용 프로그램에 대한 링크가 표시됩니다.

HTML에서 '* ngIf'선언을 사용하지 않고 활성 경로를 기반으로 사이드 바의 내용을 변경하려면 어떻게해야합니까?

각 앱의 링크를 나열하는 코드 (어쩌면 백엔드 API에서 검색)에 JSON 객체를 갖고 싶습니다. 같은 :

[ 
    { proboard: [ 
    { label: 'Home', link: '/proboard', icon: 'fa-home'}, 
    { label: 'Candidates', link: '/proboard/candidates', icon: 'fa-users'}, 
    { label: 'New', link: '/proboard/candidate/new', icon: 'fa-new-user; } ] 
    }, 
    { tracker: [...] }, 
    { equipment: [...] } 
] 

그런 다음 사용자가 상단 네비게이션 바에서 링크 중 하나를 탐색 것, 사이드 바는 HTML의 NgFor를 사용하여, 위의 배열의 내용으로 채울 수있다.

모든 제안이나 링크를 부탁드립니다.

Answer 1

나는 똑같은 짓을 했어. 내가 어떻게 해결했는지.

1. 는
2. 그 스트림에 가입 한 서비스를 만든 최상위 응용 프로그램 구성 요소
3. 에서 메뉴를 생성하고 경로를 변경하는 등록 가능 대상 스트림을 생성 서비스
4. 에 공통 라우팅 테이블을 유지 메뉴가있는 구성 요소에서
5. 메뉴가있는 구성 요소에서 선택한 경로를 설정하는 현재 구성 요소에서 subcription.next를 발행하십시오.

다른 유형의 구성 요소 상호 작용으로이를 수행 할 수 있습니다. 여기에 각이 문서에서 해당에 대한 추가 정보를 원하시면입니다 : https://angular.io/docs/ts/latest/cookbook/component-communication.html

Answer 2

가능한 해결책은 다음과 같습니다.

세 개의 앱은 각각 별도로 정의되어 있으므로 각 앱에서 다시 사용할 수있는 완전히 독립적 인 'SideBarComponent'를 만들 수 있습니다.

@Input() 변수로 원하는 모든 정보를 구성 요소에 제공 할 수 있으므로 필요한 레이블, 링크 및 아이콘 목록을 구성 요소에 제공 할 수 있습니다. 예를 들어

EquipmentComponent.ts

sideBarLinks: any = { proboard: [ 
    { label: 'Home', link: '/proboard', icon: 'fa-home'}, 
    { label: 'Candidates', link: '/proboard/candidates', icon: 'fa-users'}, 
    { label: 'New', link: '/proboard/candidate/new', icon: 'fa-new-user; } ] 
} 

EquipmentComponent.html

<side-bar [buttons]='sideBarLinks'></side-bar> 

SideBarComponent.ts

@Input() 
buttons: any; 

SideBarComponent.html

0

// Use 'buttons' to construct your buttons in the sidebar. Possibly using an ng repeater in this template. 

이 정확히, 나는 이것이 당신이

2. 각도

와 재사용 가능한 구성 요소를 사용하는 방향으로 생각 할텐데 구현 결국하지 않더라도

는 희망이 도움이됩니다!

여기에는 구성 요소 상호 작용에 대해 알아야 할 모든 것 이상의 내용이 있습니다 : https://angular.io/docs/ts/latest/cookbook/component-communication.html.

Answer 3

2 가지 방법

(1) - 사이드 바 구성 요소에서 변경 사항을 라우터에 가입,하지만 당신은 사용하게됩니다 *ngIf

@Input() 
data: any; 

constructor(private router: Router) { 
    router.changes.subscribe((val) => { 
     if(val === 'noSidebarRoute'){ 
      this.navButtons= false; 
     } 
     else { 
      this.navButtons= navData; 
     } 
    }) 
} 

다음 상위 구성 요소 템플릿

@Component({ 
    selector: 'parent', 
    template: `<side-bar [data]='navData'></side-bar>` 
}); 

export class Parent{ 

navData = [ 
    { proboard: [ 
     { label: 'Home', link: '/proboard', icon: 'fa-home'}, 
     { label: 'Candidates', link: '/proboard/candidates', icon: 'fa-users'}, 
     { label: 'New', link: '/proboard/candidate/new', icon: 'fa-new-user; } 
    ]}, 
    { tracker: [...] }, 
    { equipment: [...] } 
]} 

2 - 앱 구성 요소 (또는 사이드 바 부모 컴포넌트), resolver.resolveComponent을 사용하여 애플리케이션에 사이드 바 구성 요소를 동적으로 추가하십시오. 그러면 데이터 바인딩 (*ngIf)을 사용하지 않게됩니다.

sidebarCmpRef:ComponentRef<any>; 

constructor(private router: Router, 
      private viewContainerRef:ViewContainerRef, 
      private resolver:ComponentResolver) { 

    router.changes.subscribe((val) => { 
     if(val === 'noSidebarRoute'){ 
      if(this.sidebarCmpRef){ 
       this.sidebarCmpRef.destroy(); 
       this.sidebarCmpRef 
      } 
     } 
     else{ 
      this.AddSidebar(); 
     } 
    }) 
} 

AddSidebar(){ 
    if(!this.cmpRef){ 
     this.resolver.resolveComponent(<Type>SideBar) 
      .then((factory:ComponentFactory<any>) => { 
      this.cmpRef = this.viewContainerRef.createComponent(factory); 
      this.cmpRef.instance.buttons= navData; 
     }); 
    } 
} 

Answer 4

나는 각도 기본 접근 방식, 즉 경로 내부에서 어린이를로드하는 것을 선호합니다. 자녀/서브 모듈에 다음

import { NgModule } from '@angular/core'; 
import { Routes, RouterModule } from '@angular/router'; 
import { PageNotFoundComponent } from './shared/components/pagenotfound.component'; 

export const appRoutes: Routes = [ 
    { 
    path: 'tracker', 
    loadChildren: 'app/tracker/module#trackermodule', 
    }, 
    { 
    path: 'proboard', 
    loadChildren: 'app/proboard/module#proboard', 
    }, 
{ 
    path: 'equiment', 
    loadChildren: 'app/equiment/module#equiment', 
    }, 
    { 
    path: '**', 
    component: PageNotFoundComponent 
    } 
]; 

@NgModule({ 
    imports: [RouterModule.forRoot(appRoutes)], 
    declarations: [ 
     PageNotFoundComponent 
    ], 
    exports: [RouterModule] 
}) 

export class AppRouterModule { 
} 

을 다음과 같이

라우팅 구성이 좋은 제안입니다

import { RouterModule } from '@angular/router'; 
import { CssComponent } from './view'; 
import { RadioAndCheckBoxComponent } from './radio-and-checkbox/view'; 

export const RouteComponents = [ 
    CssComponent 
]; 

export const Routes = RouterModule.forChild([ 
    { 
    path: '', 
    component: equimentComponent, 
    children: [ 
     { 
     path: 'Home', 
     component: HomeComoponent 
     }, 
     { 
     path: 'Candidates', 
     component: CandidatesComoponent 
     } 
    ] 
    } 
]);