Невозможно перезагрузить/обновить активный маршрут

Question

Я недавно обновился до новых RC3 и Router3alpha, и, похоже, некоторые вещи изменились.

Я заметил, что щелчок по ссылке активного маршрута больше не приводит к перезагрузке компонента. Как достичь такого поведения с новым маршрутизатором3?

Моя ссылка выглядит

<a [routerLink]="['/link1']">Link1</a> 

А чтобы проверить, я просто использовал случайное число в ngOnInit:

export class LinkoneComponent implements OnInit 
{ 

    public foo: number; 
    constructor() {} 

    ngOnInit() 
    { 
     this.foo = Math.floor(Math.random() * 100) + 1; 
    } 

} 

Это прекрасно работает, когда switiching между маршрутами, но нажатие на активный в данный момент маршрут не приводит к перезагрузке компонента.

Answer 1

Это в настоящее время не поддерживается. Если изменяются только значения параметров, но маршрут остается неизменным, компонент не создается повторно.

Смотрите также https://github.com/angular/angular/issues/9811

Вы можете подписаться на Params, чтобы получить уведомление, когда PARAMS изменить повторно инициализировать экземпляр компонента.

Смотрите также https://stackoverflow.com/a/38560010/217408

Answer 2

Для угловых 2 RC7 - маршрутизатору 3,0

Изменить базовый URL в index.html для <script>document.write('<base href="/" />');</script>

Answer 3

Это лучший хак, который я смог подойти к чтобы обойти эту проблему раздражает:

var currentUrl = this.router.url; 
    var refreshUrl = currentUrl.indexOf('someRoute') > -1 ? '/someOtherRoute' : '/someRoute'; 
    this.router.navigateByUrl(refreshUrl).then(() => this.router.navigateByUrl(currentUrl)); 

Это работает, но это по-прежнему хак, и я ненавижу, что Angular чай м не предоставил метод reload()

Answer 4

По моему скромному мнению, вы можете использовать window.location.reload() в машинописи. Этот способ может быть простым и безопасным, поскольку является частью функций браузера.

Answer 5

if (currentUrl.indexOf('/settings') > -1) { 
    this.router.navigateByUrl('/communication').then(() => this.router.navigateByUrl('/settings')); 
} else { 
    this.router.navigate(['/settings']); 
} 

Answer 6

С угловыми 5.1 Теперь это можно сделать с помощью опции onSameUrlNavigation конфигурации в составе встроенного углового маршрутизатора. Достаточно просто настроить и уйти, хотя это и не очевидно из документации.

Первое, что вам нужно сделать, это установить параметр в вашем app.routing.ts, если у вас есть файл или файл, в котором настроена маршрутизация вашего приложения.

Существует два возможных значения для onSameUrlNavigation 'reload' или false. Значение по умолчанию: false, что не приводит к тому, что маршрутизатору предлагается перейти к активному маршруту. Мы хотим установить это значение в reload. Стоит отметить, что reload фактически не выполняет работу по перегрузке маршрута, он только повторно запускает события на маршрутизаторе, которые нам тогда нужно подключить.

@NgModule({ 
    imports: [RouterModule.forRoot(routes, {onSameUrlNavigation: 'reload'})], 
    exports: [RouterModule], 
}) 

Чтобы определить, когда эти события на самом деле уволили, вам нужно указать опцию runGuardsAndResolvers конфигурации на вашем маршруте.Это может принимать три значения ...

paramsChange - только огонь при изменении параметров маршрута, например. где id в /user/:id изменениях

paramsOrQueryParamsChange - пожар при изменении параметра маршрута или изменении параметра запроса. например id или изменение limit недвижимости в /user/:id/invites?limit=10

always - Всегда огонь, когда маршрут навигация

Мы хотим, чтобы всегда указывать в этом случае. Пример маршрута показан ниже.

export const routes: Routes = [ 
    { 
    path: 'invites', 
    component: InviteComponent, 
    children: [ 
     { 
     path: '', 
     loadChildren: './pages/invites/invites.module#InvitesModule', 
     }, 
    ], 
    canActivate: [AuthenticationGuard], 
    runGuardsAndResolvers: 'always', 
    } 
] 

Это ваш маршрутизатор. Следующий шаг - фактически обработать события внутри одного из ваших компонентов. Вам нужно будет импортировать Router в свой компонент, а затем подключиться к событиям. В этом примере я подключился к событию NavigationEnd, которое запускается после того, как маршрутизатор завершил навигацию с одного маршрута на другой. Из-за того, как мы настроили приложение, это теперь будет срабатывать, даже если вы попытаетесь перейти к текущему маршруту.

export class InviteComponent implements OnInit { 
    constructor(
    // ... your declarations here 
    private router: Router, 
) { 
    // subscribe to the router events 
    this.router.events.subscribe((e: any) => { 
     // If it is a NavigationEnd event re-initalise the component 
     if (e instanceof NavigationEnd) { 
     this.initialiseInvites(); 
     } 
    }); 
    } 

    initialiseInvites() { 
    // Set default values and re-fetch any data you need. 
    } 
} 

Тяжелая атлетика идет в метод initialiseInvites(), это где вы сбрасываете свойства их значения по умолчанию и извлекать данные из услуг, чтобы получить компонент обратно в исходное состояние.

Вам необходимо повторить этот шаблон для каждого компонента, который вы хотите перезагрузить, когда вы нажимаете или обновляете какую-либо кнопку обновления, не забудьте добавить опцию для каждого маршрута в файле маршрутизации.

Answer 7

Угловой 2-4 текущий маршрут перезарядка хак

Для меня, используя этот метод работает:

onRefresh() { 
    this.router.routeReuseStrategy.shouldReuseRoute = function(){return false;}; 

    let currentUrl = this.router.url + '?'; 

    this.router.navigateByUrl(currentUrl) 
    .then(() => { 
     this.router.navigated = false; 
     this.router.navigate([this.router.url]); 
    }); 
    } 

Вы можете прикрепить этот метод к событию щелчка по текущему компоненту, чтобы перезагрузить его.