问道Angular——Angular刷新当前页面

RyanHoo 发布于2019-08-26 13:24 / 3302人阅读

摘要：默认情况下，路由器将会忽略这次导航。但这样会阻止类似于刷新按钮的特性。使用该选项可以配置导航到当前时的行为。使用配置实际上不会重新加载路由，只是重新出发挂载在路由器上的事件。配置有三个值仅在路由参数更改时触发。

onSameUrlNavigation

从angular5.1起提供onSameUrlNavigation来支持路由重新加载。、

有两个值"reload"和"ignore"。默认为"ignore"

定义当路由器收到一个导航到当前 URL 的请求时应该怎么做。默认情况下，路由器将会忽略这次导航。但这样会阻止类似于 "刷新" 按钮的特性。使用该选项可以配置导航到当前 URL 时的行为。

使用 配置onSameUrlNavigation

@NgModule({
  imports: [RouterModule.forRoot(
    routes,
    { onSameUrlNavigation: "reload" }
  )],
  exports: [RouterModule]
})

reload实际上不会重新加载路由，只是重新出发挂载在路由器上的事件。

配置runGuardsAndResolvers

runGuardsAndResolvers有三个值：

paramsChange: 仅在路由参数更改时触发。如/reports/:id 中id更改

paramsOrQueryParamsChange: 当路由参数更改或参训参数更改时触发。如/reports/:id/list?page=23中的id或page属性更改

always ：始终触发

const routes: Routes = [
  {
    path: "",
    children: [
      { path: "report-list", component: ReportListComponent },
      { path: "detail/:id", component: ReportDetailComponent, runGuardsAndResolvers: "always" },
      { path: "", redirectTo: "report-list", pathMatch: "full" }
    ]
  }
];

组件监听router.events

import {Component, OnDestroy, OnInit} from "@angular/core";
import {Observable} from "rxjs";
import {Report} from "@models/report";
import {ReportService} from "@services/report.service";
import {ActivatedRoute, NavigationEnd, Router} from "@angular/router";

@Component({
  selector: "app-report-detail",
  templateUrl: "./report-detail.component.html",
  styleUrls: ["./report-detail.component.scss"]
})
export class ReportDetailComponent implements OnInit, OnDestroy {
  report$: Observable;
  navigationSubscription;

  constructor(
    private reportService: ReportService,
    private router: Router,
    private route: ActivatedRoute
  ) {
    this.navigationSubscription = this.router.events.subscribe((event: any) => {
      if (event instanceof NavigationEnd) {
        this.initLoad(event);
      }
    });
  }

  ngOnInit() {
    const id = +this.route.snapshot.paramMap.get("id");
    this.report$ = this.reportService.getReport(id);
  }

  ngOnDestroy(): void {
    // 销毁navigationSubscription，避免内存泄漏
    if (this.navigationSubscription) {
      this.navigationSubscription.unsubscribe();
    }
  }

  initLoad(e) {
    window.scrollTo(0, 0);
    console.log(e);
  }
}

☞☞☞问道Angular系列☜☜☜

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/108752.html

问道Angular——Angular5/6/7项目添加热更新(HMR)功能

摘要：提供以上热更新功能使用初始化项目命令行进入该目录启动项目将附带功能。提供angular6以上HMR(热更新)功能使用hmr-cli npm i -g hmr-cli 初始化angular项目,命令行进入该目录 hmr init npm run hmr启动项目将附带hmr功能。详细配置如下： Angular6添加HMR environments目录 environme...

Aceyclee 2019-08-23 12:17 评论0 收藏0
问道Angular——Angular设置别名alias

摘要：设置别名在根目录下中添加和访问环境变量添加了别名，以便能够从应用程序中的任何位置轻松访问环境变量。它适用于所有指定的环境，因为它会根据传递给命令的标志自动解析正确的环境文件。设置别名在根目录下tsconfig.json中添加baseUrl和paths { compilerOptions: { baseUrl: src, paths: { @app...

Neilyo 2019-08-23 12:54 评论0 收藏0
问道Angular——APP_INITIALIZER

摘要：概述有时需要在加载应用之前运行代码，有时希望暂停应用初始化，直到完成某些限制之后再执行。令牌可以完成这项操作。是一个函数，在应用改程序初始化时被调用。可以在类的中以的形式来配置。示例在应用启动阶段利用校验登录信息是否有效问道系列概述有时需要在加载应用之前运行代码，有时希望暂停应用初始化，直到完成某些限制之后再执行。APP_INITIALIZER令牌可以完成这项操作。 APP_...

yunhao 2019-08-23 12:54 评论0 收藏0
Angular 路由

摘要：要做到这一点，有三个必不可少的步骤，分别是创建根路由模块定义路由配置添加指令标签。下面的代码以路由配置为参数，通过调用方法来创建根路由模块，并将其导入到应用的根模块中。概述路由所要解决的核心问题就是通过建立URL和页面的对应关系，使得不同的页面可以用不同的URL来表示。 Angular路由的核心工作流程图 showImg(https://segmentfault.com/img/b...

Olivia 2019-08-26 10:22 评论0 收藏0
Angular 1 深度解析：脏数据检查与 angular 性能优化

摘要：通常写代码时我们无需主动调用或是因为在外部对我们的回调函数做了包装。类似的不只是这些事件回调函数，还有等。常量依旧会重复检查。会检查中有没有一个名为的成员。 TL;DR 脏检查是一种模型到视图的数据映射机制，由 $apply 或 $digest 触发。脏检查的范围是整个页面，不受区域或组件划分影响使用尽量简单的绑定表达式提升脏检查执行速度尽量减少页面上绑定表达式的个数（单次绑定...

fasss 2019-08-01 17:17 评论0 收藏0