角度导航策略

Question

我正在构建一个有角度的应用程序，但是我的html结构有些不同，我具有多用途模板，因此无需使用单个页面，因此用户可以在它们全部堆叠在一起的那些页面之间导航。我有3个组成部分：

• HomeComponent
• AboutComponent
• NavbarComponent-具有2个定位标记，可向下滚动到目标部分

模板NavbarComponent：

<div>
    <a href="#home">Home</a>
    <a href="#about">About</a>
</div>

模板HomeComponent：

<div>
    <h1>Home</h1>
    lorem...
</div>

模板AboutComponent：

<div>
    <h1>About</h1>
    lorem...
</div>

模板AppComponent：

<navbar></navbar>
<home id="home"></home>
<about id="about"></about>

here's the demo

所以我的问题是当用户单击链接时，我没有myapp.com/#home或myapp.com/#about的问题，我该如何以以下格式获取网址： myapp.com/home 基于app.component.html中模板的结构，我将根据url将窗口向下滚动到目标部分，但是我需要知道如何更改行为，因为如果这样做的话：

<a href="/home">Home</a>

浏览器将发出GET请求

Answer 1

  

所以我的问题是当用户单击链接时，我没有myapp.com/#home或myapp.com/#about的问题，我怎么能以这种格式获取网址：myapp.com/home

我刚刚为您制作了一个超小型示例项目。它提供了您想要的功能。

这里是演示：https://codesandbox.io/s/xj8pvl18lq

1。在app.module.ts中，我们将具有以下内容：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AppComponent } from './app.component';
import { HomeComponent } from './components/home.component';
import { AboutComponent } from './components/about.component';

const appRoutes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent }
];

@NgModule({
  declarations: [AppComponent, AboutComponent, HomeComponent],
  imports: [BrowserModule, RouterModule.forRoot(appRoutes)],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

2。在app.component.ts中，我们有：

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <div>
      <a routerLink="/">Home</a>
      <a routerLink="/about">About</a>
      <hr/>
      <router-outlet></router-outlet>
    </div>
  `
})
export class AppComponent {}

3。这是两个超级简单的组件：Home Component和About Component

home.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  template: `
        <div>
            <h2>Home</h2>
        </div>
    `
})
export class HomeComponent {}

about.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-about',
  template: `
        <div>
            <h2>About</h2>
        </div>
    `
})
export class AboutComponent {}

尝试一下，希望它能按预期工作。