내가 그것의 내부 <code><router-outlet></code>와 부모 구성 요소가

Question

아이 경로에 대한 라우터 연결이 활성 상태로 유지, 부모는이 노선에 지시하는 메뉴를 가지고 있으며, 메뉴가 드롭 다운있는 하위 메뉴가 있습니다. 현재 활성 경로가 메뉴에서 항상 강조 표시되지만, 해당 메뉴 옵션이 하위 메뉴 인 경우 열려 있지 않으면 표시되지 않습니다. 경로가 그 안에 있으면 하위 메뉴를 열어두고 싶습니다.

부모님 한 곳에서 관리하고 싶습니다. 내 현재 시도는 현재 경로 url을 얻고 하위 메뉴 경로 문자열이 포함되어 있는지 확인합니다. 이 방법의 문제점은 자식 경로에 대한 경로가 변경 될 때마다 현재 경로를 얻을 수있는 라이프 사이클 후크를 찾을 수 없다는 것입니다. 즉, 렌더링되는 새 하위 구성 요소를 탐지하는 라이프 사이클 후크입니다.

네이티브 요소를 사용하기 때문에 내 렌더러가 DOM에 나쁜 방식으로 액세스합니까?

HTML :

<div 
         class="dropdown" 
         appDropdown 
         #DropdownOne 
        > 
         <button 
          class="top item btn btn-secondary dropdown-toggle" 
          type="button" 
          id="dropdownMenuButton" 
          data-toggle="dropdown" 
          aria-haspopup="true" 
          aria-expanded="false" 
         > 
          all options 
         </button> 
         <div 
          class="item dropdown-menu" 
          aria-labelledby="dropdownMenuButton" 
         > 
          <a 
           class="dropdown-item" 
           routerLink="/myMenu/options/option1" 
           routerLinkActive="active" 
          > 
          option 1</a> 
          <a 
           class="dropdown-item" 
           routerLink="/myoptions/options/option2" 
           routerLinkActive="active" 
          > 
          Option 2</a> 
          <a 
           class="dropdown-item" 
           routerLink="/myoptions/options/option3" 
           routerLinkActive="active" 
          > 
          Option 3</a> 
         </div> 
    </div> 
... 
<div class="content-box col"> 
      <router-outlet></router-outlet> 
</div> 
... 

TS

export class NetworkComponent implements AfterViewInit { 
    @ViewChild('DropdownOne') dropdownOne: ElementRef; 
    @ViewChild('DropdownTwo') dropdownTwo: ElementRef; 
    url: string; 
    // stateOne = 'closed'; 
    // stateTwo = 'closed'; 

    constructor(private router: Router, 
       private renderer: Renderer2) {} 

    ngAfterViewInit() { 
     this.url = this.router.url; 
     console.log(this.url) 
     if (this.url.includes('interface')) { 
      console.log('TRUE') 
      this.renderer.addClass(this.dropdownOne.nativeElement, 'show') 
     } 
     if (this.url.includes('firewall')) { 
      console.log('TRUE') 
      this.renderer.addClass(this.dropdownTwo.nativeElement, 'show') 
     } 
    } 

Answer 1

당신은 관찰 라우터 이벤트를 구독 할 수 있습니다.

constructor(private router: Router, private renderer: Renderer2) { 
    this.router.events.subscribe(() => { 
     const url = this.router.url; 
     // do your route check here 
    }); 
} 

현재 라우터에 대한 자세한 읽을 수 있습니다 : 렌더링을 사용하는 방법에 대한 귀하의 측면 노트에 대한

https://angular.io/api/router/Router#events, 나는 당신이 그렇게 같은 간단한 부울을 사용하여 동일한 효과를 얻을 수 있다고 생각을

<div appDropdown class="dropdown" [class.show]="isDropdownOneOpen"> ... </div> 

경로가 일치하면 true로 설정하십시오.