Угловая навигационная стратегия - PullRequest
Новая
       20

Угловая навигационная стратегия

0 голосов
/ 27 сентября 2018

Я создаю угловое приложение, но моя 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>

вот демо

Так что моя проблема вместо того, чтобы иметь myapp.com/#home или myapp.com/#about, когда пользователь нажимает на ссылку, как я могу получить URL в этом формате: myapp.com / home на основе структуры моего шаблона в app.component.html, и я прокручиваю окно до целевого раздела на основе URL, но мне нужно знать, как изменить поведение, потому что еслия делаю это так: 

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

браузер сделает запрос GET

1 Ответ

0 голосов
/ 27 сентября 2018

Таким образом, моя проблема заключается в том, что вместо того, чтобы иметь myapp.com/#home или myapp.com/#about, когда пользователь нажимает на ссылку, как я могу получить URL в этом формате: 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.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 {}

Попробуйте, надеюсь, это работает так, как вы ожидали.

...