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

Question

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

мой HTML:

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

перенаправление как в тс:

 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

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

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

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

Answer 2

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

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

Answer 3

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

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

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

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