成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

問道Angular——Angular刷新當(dāng)前頁面

RyanHoo / 3375人閱讀

摘要：默認(rèn)情況下，路由器將會忽略這次導(dǎo)航。但這樣會阻止類似于刷新按鈕的特性。使用該選項可以配置導(dǎo)航到當(dāng)前時的行為。使用配置實際上不會重新加載路由，只是重新出發(fā)掛載在路由器上的事件。配置有三個值僅在路由參數(shù)更改時觸發(fā)。

onSameUrlNavigation

??從angular5.1起提供onSameUrlNavigation來支持路由重新加載。、

??有兩個值"reload"和"ignore"。默認(rèn)為"ignore"

??定義當(dāng)路由器收到一個導(dǎo)航到當(dāng)前 URL 的請求時應(yīng)該怎么做。 默認(rèn)情況下，路由器將會忽略這次導(dǎo)航。但這樣會阻止類似于 "刷新" 按鈕的特性。 使用該選項可以配置導(dǎo)航到當(dāng)前 URL 時的行為。

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

??reload實際上不會重新加載路由，只是重新出發(fā)掛載在路由器上的事件。

配置runGuardsAndResolvers

??runGuardsAndResolvers有三個值：

paramsChange: 僅在路由參數(shù)更改時觸發(fā)。如/reports/:id 中id更改

paramsOrQueryParamsChange: 當(dāng)路由參數(shù)更改或參訓(xùn)參數(shù)更改時觸發(fā)。如/reports/:id/list?page=23中的id或page屬性更改

always?：始終觸發(fā)

const routes: Routes = [
  {
    path: "",
    children: [
      { path: "report-list", component: ReportListComponent },
      { path: "detail/:id", component: ReportDetailComponent, runGuardsAndResolvers: "always" },
      { path: "", redirectTo: "report-list", pathMatch: "full" }
    ]
  }
];
組件監(jiān)聽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，避免內(nèi)存泄漏
    if (this.navigationSubscription) {
      this.navigationSubscription.unsubscribe();
    }
  }

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

???問道Angular系列???

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/108752.html

相關(guān)文章

  • 問道Angular——Angular5/6/7項目添加熱更新(HMR)功能

    摘要：提供以上熱更新功能使用初始化項目命令行進(jìn)入該目錄啟動項目將附帶功能。 ??提供angular6以上HMR(熱更新)功能 使用hmr-cli npm i -g hmr-cli ??初始化angular項目,命令行進(jìn)入該目錄 hmr init ??npm run hmr啟動項目將附帶hmr功能。 詳細(xì)配置如下： Angular6添加HMR environments目錄 environme...

    Aceyclee 評論0 收藏0

  • 問道Angular——Angular設(shè)置別名alias

    摘要：設(shè)置別名在根目錄下中添加和訪問環(huán)境變量添加了別名，以便能夠從應(yīng)用程序中的任何位置輕松訪問環(huán)境變量。它適用于所有指定的環(huán)境，因為它會根據(jù)傳遞給命令的標(biāo)志自動解析正確的環(huán)境文件。 設(shè)置別名 ??在根目錄下tsconfig.json中添加baseUrl和paths { compilerOptions: { baseUrl: src, paths: { @app...

    Neilyo 評論0 收藏0

  • 問道Angular——APP_INITIALIZER

    摘要：概述有時需要在加載應(yīng)用之前運行代碼，有時希望暫停應(yīng)用初始化，直到完成某些限制之后再執(zhí)行。令牌可以完成這項操作。是一個函數(shù)，在應(yīng)用改程序初始化時被調(diào)用?？梢栽陬惖闹幸缘男问絹砼渲?。示例在應(yīng)用啟動階段利用校驗登錄信息是否有效問道系列 概述 ??有時需要在加載應(yīng)用之前運行代碼，有時希望暫停應(yīng)用初始化，直到完成某些限制之后再執(zhí)行。APP_INITIALIZER令牌可以完成這項操作。??APP_...

    yunhao 評論0 收藏0

  • Angular 路由

    摘要：要做到這一點，有三個必不可少的步驟，分別是創(chuàng)建根路由模塊定義路由配置添加指令標(biāo)簽。下面的代碼以路由配置為參數(shù)，通過調(diào)用方法來創(chuàng)建根路由模塊，并將其導(dǎo)入到應(yīng)用的根模塊中。 概述 路由所要解決的核心問題就是通過建立URL和頁面的對應(yīng)關(guān)系，使得不同的頁面可以用不同的URL來表示。 Angular路由的核心工作流程圖 showImg(https://segmentfault.com/img/b...

    Olivia 評論0 收藏0

  • Angular 1 深度解析：臟數(shù)據(jù)檢查與 angular 性能優(yōu)化

    摘要：通常寫代碼時我們無需主動調(diào)用或是因為在外部對我們的回調(diào)函數(shù)做了包裝。類似的不只是這些事件回調(diào)函數(shù)，還有等。常量依舊會重復(fù)檢查。會檢查中有沒有一個名為的成員。 TL;DR 臟檢查是一種模型到視圖的數(shù)據(jù)映射機(jī)制，由 $apply 或 $digest 觸發(fā)。 臟檢查的范圍是整個頁面，不受區(qū)域或組件劃分影響 使用盡量簡單的綁定表達(dá)式提升臟檢查執(zhí)行速度 盡量減少頁面上綁定表達(dá)式的個數(shù)（單次綁定...

    fasss 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<