Как перенаправить страницу на `refresh` без компиляции html?

Question

Я использую контент dynamic на всей моей html-странице.когда пользователь обновляет страницу, мне нужно перенаправить на домашнюю страницу.но ошибка вызвала мою html-страницу, страница вообще не перенаправлена.

my html:

<div class="btn-sec">
      <button type="submit" (click)="goToArtcilePage()" [disabled]="productedSelected" class="btn">{{appProps['book.label.buttons.next']}}</button>
    </div>

перенаправление, как в ts:

 constructor(private store: StorageService, 
      private sharedData: SharedDatasService, 
      private location:Location,
      private router:Router) {

      if ((!this.appData || !this.appProps ) && Object.keys(this.sharedData.validationDatas).length === 0) {
        this.router.navigate(['/']);
        return;
      }

    }

, но все еще получаетошибка:

ERROR TypeError: Cannot read property 'book.label.buttons.next' of undefined и страница вообще не перенаправляется.

есть предложения по устранению этой проблемы?

Answer 1

Вы можете использовать

 this.router.navigateByUrl('url', {skipLocationChange: true});

Свойство {skipLocationChange: true}) изменит маршрут, но URL не изменится.Таким образом, URL всегда отображает домашний URL, но внутренне состояние изменяется.

Другое решение - использовать Angular RouteGuards.Угловой имеет canActivate и canDeactivate Routeguards.Вы можете использовать их преимущество для вашего дела.

Answer 2

Я думаю, что проблема с {{appProps['book.label.buttons.next']}}.TypeError происходит, поскольку appProps не определено до получения данных.

Возможно, используйте безопасный оператор навигации ?, например, так: {{appProps?.book.label.buttons.next'}}.

Answer 3

используйте свойство get для доступа к данным из HTML

get getAppProps(): string {
  return this.appProps['book.label.buttons.next']
}

<button type="submit" (click)="goToArtcilePage()" [disabled]="productedSelected" class="btn">{{getAppProps}}</button>