第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

檢查當(dāng)前頁面 url 后顯示/隱藏組件

檢查當(dāng)前頁面 url 后顯示/隱藏組件

慕慕森 2021-12-02 19:27:31
我正在使用當(dāng)前位置路徑(如homepage、loginpage、logoutpage等)搜索在我的 angular 應(yīng)用程序上顯示/隱藏組件的最佳方式。我訂閱了給我當(dāng)前路徑的路由器事件,所以如果我在登錄頁面中,我應(yīng)該隱藏“導(dǎo)航欄組件”,如果我在主頁中,我應(yīng)該顯示它。這種方法應(yīng)該適用于不同當(dāng)前頁面中的不同組件。所以我想在這個方法里面*ngIf:應(yīng)用程序組件.html<nav *ngIf="myService.isComponentPartOfTheCurrentPage('navbar')">   ...some navigation buttons here</nav>我的服務(wù).tsisComponentPartOfTheCurrentPage(componentName: string): boolean {  const url = getCurrentPath(); // This works fine  return currenPathContainsThisComponent(componentName, url); // This is gonna return true or false.}這種方法的主要問題是角度循環(huán)多次調(diào)用此函數(shù)。我也讀過一些不推薦這種事物之王的博客。有沒有更好的方法來實現(xiàn)這一點?
查看完整描述

2 回答

?
阿晨1998

TA貢獻(xiàn)2037條經(jīng)驗 獲得超6個贊

您可以監(jiān)視路由器事件,特別NavigationEnd是將當(dāng)前路由分配給一個可觀察對象,然后在組件中檢查我們當(dāng)前所在的路由。


服務(wù):


import { Router, NavigationEnd } from "@angular/router";

import { filter, map } from "rxjs/operators";


currentRoute$: Observable<string>;


constructor(private router: Router) {

  this.currentRoute$ = router.events.pipe(

    filter(e => e instanceof NavigationEnd),

    map((e: NavigationEnd) => e.url)

  );

}

然后使用異步管道收聽 observable 并進(jìn)行檢查


*ngIf="(myService.currentRoute$ | async) === '/login'"

您也可以或許用includes,如果你需要檢查如果網(wǎng)址片段被包含在URL,然后你可以這樣做:


*ngIf="(myService.currentRoute$ | async).includes('login')


查看完整回答
反對 回復(fù) 2021-12-02
?
aluckdog

TA貢獻(xiàn)1847條經(jīng)驗 獲得超7個贊

在訂閱您的路線事件時,使用當(dāng)前更新服務(wù)上的行為主題


section$ = new BehaviorSubject(null);

在你的路線子


sections$.next(section);

然后在您的組件中,您使用異步管道收聽行為主題


section$ = this.service.section$;

并在模板中


<nav *ngIf="section$ | async as section">

   <div *ngIf="section === 'navbar'">Something</div>

</nav>

每次行為主體發(fā)出時,section 變量都會神奇地更新。


查看完整回答
反對 回復(fù) 2021-12-02
  • 2 回答
  • 0 關(guān)注
  • 167 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號