頁內鏈接從URL根開始

這很簡單，我不明白它可能會出錯。我試圖獲得一個簡單的頁面內鏈接來表現。頁內鏈接從URL根開始

（如果是相關的，這是一個角2個應用程序，使用路由。）

這裏是一個典型的頁面：

<a href="#content-start">Skip to main content</a> 

<div class="page-body"> 
    <main> 
     <div class="content-body" id="content-start"> 
      <h1>Employee Search</h1> 
     </div> 
    <main> 
</div>

該網頁的URL（在我的dev ENV）是

http://localhost:49974/app/employee/search

當我點擊（或聚焦然後按回車鍵）上跳到主要內容它應該去

http://localhost:49974/app/employee/search#content-start

而是去

http://localhost:49974/app#content-start

（然後立即切換到

http://localhost:49974/app/#content-start

）

我不能搞砸鏈接本身;這必須與路由的工作方式有關。

它看起來像我有做這樣：

<a href="app/request/timeoff#content-start">

但這似乎並不正確。

來源

2017-07-26 DaveC426913

頁面是否有'base'元素？ – unor

你可以添加標籤「角」的問題？如果不明顯編輯問題，系統不允許我這樣做。 –

我不知道這是否是一個正確的方法，或者角度的方式，但它的工作原理：

app.component.html：

<a href="{{pageURL}}#content-start">Skip to main content</a>

app.component.ts

export class AppComponent { 

    pageURL: string; 

    ngDoCheck() { 
     this.pageURL = window.location.href; 
     var link = this.pageURL.indexOf('#content-start'); 
     if (link > -1) { 
      console.log(this.pageURL.substring(0, link)); 
      this.pageURL = this.pageURL.substring(0, link); 
     } 
    } 
}

每-page.html中：

<h1 class="content-body" id="content-start">Page</h1>

不確定ngDoCheck是否適合使用事件。

完全披露：app.component是一個包裝 - 包含標題和「跳轉到內容」鏈接，其中包含所有頁面及其內容。

因此，「跳轉到內容」鏈接的邏輯只存在一次，而實際的內容目標＃content-start位於每個內容頁面的頂部。

來源

2017-07-26 18:01:56 DaveC426913

頁內鏈接從URL根開始

回答

相關問題