Question

每次通过app-route元素访问页面时，是否可以重新加载页面（如/ home或/ photos）？

<div class="example-container mat-elevation-z8">
  <cdk-table #table [dataSource]="dataSource" class="example-table">
    <!--- Note that these columns can be defined in any order.
          The actual rendered columns are set as a property on the row definition" -->

    <!-- ID Column -->
    <ng-container cdkColumnDef="userId">
      <cdk-header-cell *cdkHeaderCellDef class="example-header-cell"> ID </cdk-header-cell>
      <cdk-cell *cdkCellDef="let row" class="example-cell"> {{row.id}} </cdk-cell>
    </ng-container>

    <!-- Progress Column -->
    <ng-container cdkColumnDef="progress">
      <cdk-header-cell *cdkHeaderCellDef class="example-header-cell"> Progress </cdk-header-cell>
      <cdk-cell *cdkCellDef="let row" class="example-cell"> {{row.progress}}% </cdk-cell>
    </ng-container>

    <!-- Name Column -->
    <ng-container cdkColumnDef="userName">
      <cdk-header-cell *cdkHeaderCellDef class="example-header-cell"> Name </cdk-header-cell>
      <cdk-cell *cdkCellDef="let row" class="example-cell"> {{row.name}} </cdk-cell>
    </ng-container>

    <!-- Color Column -->
    <ng-container cdkColumnDef="color">
      <cdk-header-cell *cdkHeaderCellDef class="example-header-cell">Color</cdk-header-cell>
      <cdk-cell *cdkCellDef="let row" class="example-cell"
                [style.color]="row.color">
        {{row.color}}
      </cdk-cell>
    </ng-container>

    <cdk-header-row *cdkHeaderRowDef="displayedColumns" class="example-header-row"></cdk-header-row>
    <cdk-row *cdkRowDef="let row; columns: displayedColumns;" class="example-row"></cdk-row>
  </cdk-table>
</div>

在我的情况下，我使用了Polymer Starter Kit，我的网络应用程序包含几个页面，例如/ home和/ discover，这些页面都可以通过左侧抽屉中的链接访问。

现在应用程序似乎仍然保持页面或菜单的“状态”，即使在我导航到应用程序内的其他页面之后，例如从/ home导航到/ discover保持页面的整个状态/ home（滚动位置，打开的菜单等），当我再次访问/主页时。

我希望每次访问页面时应用程序都会重新加载页面，这样它就会自动丢弃页面所在的先前状态。这可能是js中的某些onPageLoad还是其他选项 - 路线元素可用吗？

谢谢！

Answer 1

app-route元素还有其他可用选项吗？

不确定，但我认为没有。

顺便说一句，这种行为来自iron-location（由app-location包含），正如您在source中看到的那样。它只是监听body元素上的click事件，这样你就可以在事件传播到body之前停止它。

例如（没有测试）

<dom-module>
  ...
    <a href='/discover' on-click='stopPropagation'>
  ...
    stopPropagation (event) {
      event.stopPropagation()
    }
  ...
</dom-module>

每次访问页面时重新加载页面

1 个答案: