Question

如何在不进行 HTML 编译的情况下在“刷新”时重定向页面？

2018-06-06

110

angular angular-router

我的所有 html 页面都使用了 动态 内容。当用户刷新页面时，我需要重定向到主页。但我的 html 页面抛出了错误，页面根本没有重定向。

我的 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;
      }

    }

但仍然收到错误：

错误 TypeError：无法读取未定义的属性“book.label.buttons.next” 并且页面根本没有重定向。

有什么建议可以解决这个问题吗？

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

您可以使用

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

{skipLocationChange: true}) 属性将更改路由，但 url 不会更改。因此，url 始终显示主页 url，但内部状态已更改。

另一种解决方案是使用 Angular RouteGuards 。Angular 具有 canActivate 和 canDeactivate Routeguards。您可以根据自己的情况利用它们的优势。

Answer 3

我认为问题出在 {{appProps['book.label.buttons.next']}> 。由于在数据到达之前 appProps 尚未定义，因此发生 TypeError 。

也许可以使用安全导航运算符 ? ，如下所示： {{appProps?.book.label.buttons.next'}> 。