Question

这很简单，我不知道怎么可能出错。我试图获得一个简单的页内链接来表现。

（如果它是相关的，这是一个角度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>

此页面的网址（在我的开发环境中）是

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">

但这看起来并不正确。

Answer 1

我不知道这是正确的方式，还是角度方式，但它有效：

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是一个包装器 - 带有标题，并且＆＃39;跳到内容＆＃39;包含所有页面及其内容的链接。

所以，＆＃39;跳到内容＆＃39;的逻辑链接存在一次，而实际内容目标#content-start位于每个内容页面的顶部。

页内链接从URL根开始

1 个答案: