页内链接从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根开始

回答

相关问题