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>

像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

使用获取属性来访问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})属性将更改路线，但不会更改网址。因此，网址始终显示主页，但内部状态已更改。

另一种解决方案是使用Angular RouteGuards。 Angular有canActivate和canDeactivate RouteGuards。你可以利用他们的优势。

Answer 3

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

也许使用安全导航操作符?，如下所示：{{appProps?.book.label.buttons.next'}}。

如何在没有html编译的情况下重定向`refresh`页面？

3 个答案: