Отключить перезагрузку страницы 6 угловой маршрутизации - PullRequest
Новая
       8

Отключить перезагрузку страницы 6 угловой маршрутизации

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

Привет, ребята, у меня проблема с Angular.Когда я нажимаю на ссылку, браузер перезагружает сайт (обычно Angular загружает только тот компонент, который связан с путем).Что мне нужно сделать?

Page1 и Page2 являются компонентами по умолчанию.

app.module.ts 

import {RouterModule, Routes} from '@angular/router';
import { Page1Component } from './page1/page1.component';
import { Page2Component } from './page2/page2.component';

const routes: Routes = [
  { path: 'page1', component: Page1Component },
  { path: 'page2', component: Page2Component }
];

@NgModule({
  declarations: [
    AppComponent,
    Page1Component,
    Page2Component
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(routes)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts 

<router-outlet></router-outlet>
<a href="/page1">Page1</a>     
<a href="/page2">Page2</a>

Ответы [ 3 ]

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

Идея одностраничного приложения заключается в том, что браузер никогда не запускает запрос на другую .html страницу после извлечения начальной index.html.Фронтальная навигация, включаемая Angular @angular/router, имитирует только «страницы».

Когда вы открываете новую угловую «страницу», выполняется JavaScript, который удаляет видимые в данный момент элементы из DOM и заменяет их новыми, которые образуют другой экран - который мы называем «страницей».

Используя href для элемента привязки (<a>), вы сообщаете браузеру, что нужно извлечь другую страницу с сервера.Вместо этого вы должны сказать Angular заменить элементы DOM, чтобы сформировать новый экран.Вы делаете это с помощью директивы routerLink, которая доступна в RouterModule. 

<a routerLink="/page1">Go to page 1</a>

. Я предлагаю ознакомиться с учебником "Тур героев", доступным по angular.io ,официальный сайт Angular.Это также касается маршрутизации.Маршрутизация также охватывается здесь .

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

href обозначает гиперссылку и используется для переключения между несколькими страницами в многостраничном приложении.Поскольку угловые приложения в основном SPA's (Single Page Applications), routerLink - это угловая директива, которая загружает компоненты на странице.При использовании routerLink обновляются только компоненты на странице, а не страница полностью.Таким образом, вы должны использовать routerLink, чтобы предотвратить обновление страницы.Ниже должно быть содержание вашего app.component.ts: 

<router-outlet></router-outlet>
<a routerLink="/page1">Page1</a>     
<a routerLink="/page2">Page2</a>
0 голосов
/ 15 сентября 2018

Использование href будет выполнять перенаправление URL для этого тега anchor, перенаправление происходит так же (поскольку рассматривается target='_self' on anchor).

Используйте директиву routerLink, предоставляемую Angular Router API, которая помогает перемещаться между страницами SPA. 

<a routerLink="/page1">Page1</a>     
<a routerLink="/page2">Page2</a>
...