點選頁首，如何標示該項目

juben · 2021年04月15日03:18

各位大大,

想請問要如何做出像 angular 官網上頁首的功能

當網址是 Angular - 瀏覽 ANGULAR 相關資源時

頁首的 RESOURCES 項目就會自動被標示

我目前是使用 router-outlet 來顯示內容，頁首跟頁尾都是固定的

但卡在要如何將 router-outlet 中的 component 的 route 值丟給 header 判斷呢?

或是我有辦法直接在 header component 取得 route 的資訊嗎?

有用過 @Input 跟 @Ouput 完全取不到值><

用了 router-outlet onActive 也抓不到 route 的資料

完全沒想法，在請大大們指點，謝謝~

Kevin · 2021年04月17日00:47

那邊可以使用 RouterLinkActive 這種方式來做到 API

這個是 angular.io 的作法, 看 top-menu 的部分

github.com

angular/angular/blob/master/aio/src/app/app.component.ts

import { Component, ElementRef, HostBinding, HostListener, OnInit, QueryList, ViewChild, ViewChildren } from '@angular/core';
import { MatSidenav } from '@angular/material/sidenav';
import { DocumentContents, DocumentService } from 'app/documents/document.service';
import { NotificationComponent } from 'app/layout/notification/notification.component';
import { CurrentNodes, NavigationNode, NavigationService, VersionInfo } from 'app/navigation/navigation.service';
import { SearchResults } from 'app/search/interfaces';
import { SearchBoxComponent } from 'app/search/search-box/search-box.component';
import { SearchService } from 'app/search/search.service';
import { Deployment } from 'app/shared/deployment.service';
import { LocationService } from 'app/shared/location.service';
import { ScrollService } from 'app/shared/scroll.service';
import { TocService } from 'app/shared/toc.service';
import { BehaviorSubject, combineLatest, Observable } from 'rxjs';
import { first, map } from 'rxjs/operators';

const sideNavView = 'SideNav';
export const showTopMenuWidth = 1048;
export const dockSideNavWidth = 992;
export const showFloatingTocWidth = 800;

This file has been truncated. show original

github.com

angular/angular/blob/master/aio/src/app/layout/top-menu/top-menu.component.ts

import { Component, Input } from '@angular/core';
import { CurrentNode, NavigationNode } from 'app/navigation/navigation.service';

@Component({
  selector: 'aio-top-menu',
  template: `
    <ul role="navigation">
      <li *ngFor="let node of nodes" [ngClass]="{selected: node.url === currentUrl}">
        <a class="nav-link" [href]="node.url" [title]="node.tooltip">
          <span class="nav-link-inner">{{ node.title }}</span>
        </a>
      </li>
    </ul>`
})
export class TopMenuComponent {
  @Input() nodes: NavigationNode[];
  @Input() currentNode: CurrentNode | undefined;

  get currentUrl(): string | null { return this.currentNode ? this.currentNode.url : null; }
}

juben · 2021年04月21日08:56

謝謝 Kevin 大大~
有用 RouterLinkActive 解決了,
另外也謝謝您提供 angular.io 的作法~
還真的不知道有 source code 可以看~
學習了~~~