Skip to content

fix(module:tabs): update active router tab after tabs changed - #7649

Merged
Laffery merged 3 commits into
NG-ZORRO:masterfrom
laggage:fix-link-tab-active-tab-mismatch
Mar 26, 2025
Merged

fix(module:tabs): update active router tab after tabs changed#7649
Laffery merged 3 commits into
NG-ZORRO:masterfrom
laggage:fix-link-tab-active-tab-mismatch

Conversation

@laggage

@laggage laggage commented Sep 27, 2022

Copy link
Copy Markdown
Contributor

PR Checklist

Please check if your PR fulfills the following requirements:

PR Type

What kind of change does this PR introduce?

[x] Bugfix
[x] Application (the showcase website)

What is the current behavior?

Tabs with Router always select the first tab after a refresh

Issue Number: #4773

What is the new behavior?

Tabs with Router will select the tab match the route after a refresh

Does this PR introduce a breaking change?

[ ] Yes
[x] No

Other information

I have added an ADD button to the demo of link router tab which will add a new tab after click; you can try refresh demo page with query params tab=1 (the full path should be /components/tabs/en?tab=1), and click the ADD button on link router demo, the active tab should switch to the newly added tab with title NewTab1

@laggage
laggage requested a review from hsuanxyz as a code owner September 27, 2022 05:13
@zorro-bot

zorro-bot Bot commented Sep 27, 2022

Copy link
Copy Markdown

This preview will be available after the AzureCI is passed.

@codecov

codecov Bot commented Sep 27, 2022

Copy link
Copy Markdown

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 91.95%. Comparing base (434d17d) to head (2f12985).
Report is 2 commits behind head on master.

Additional details and impacted files
@@            Coverage Diff             @@
##           master    #7649      +/-   ##
==========================================
+ Coverage   91.94%   91.95%   +0.01%     
==========================================
  Files         559      559              
  Lines       19773    19774       +1     
  Branches     3050     3050              
==========================================
+ Hits        18180    18184       +4     
+ Misses       1267     1262       -5     
- Partials      326      328       +2     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@laggage
laggage force-pushed the fix-link-tab-active-tab-mismatch branch from 3c8cc06 to c9d044e Compare September 27, 2022 05:29
@laggage
laggage marked this pull request as draft March 4, 2023 08:24
@laggage
laggage force-pushed the fix-link-tab-active-tab-mismatch branch from c9d044e to 04467af Compare March 4, 2023 12:56
@laggage laggage changed the title fix(module:tabs): fix selected index not update if new tab added after navigated fix(module:tabs): update active router tab after tabs changed Mar 4, 2023
@laggage
laggage force-pushed the fix-link-tab-active-tab-mismatch branch from 04467af to 05d7fd2 Compare March 4, 2023 13:13
@laggage
laggage marked this pull request as ready for review March 4, 2023 13:48
@laggage

laggage commented Mar 4, 2023

Copy link
Copy Markdown
Contributor Author

I have update the pr

Please take a look when you have time, let me know if there any problem in the code, i will try fix it as soon a i can

@laggage

laggage commented May 25, 2023

Copy link
Copy Markdown
Contributor Author

Hey, I'm looking forward to your review :) @hsuanxyz

This will fix #4773, once merged, we can remove the hack code in our project that using the router tab

Please take a look when you are free

@tonybrasunas-greenlots

Copy link
Copy Markdown

Any further progress on this? It's been nearly two years, and we're still seeing the Menu default to the first page on page refresh.

@Laffery Laffery left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please rebase from master

@laggage

laggage commented Mar 26, 2025

Copy link
Copy Markdown
Contributor Author

Please rebase from master

Updated

@laggage
laggage requested a review from Laffery March 26, 2025 04:48
@laggage
laggage force-pushed the fix-link-tab-active-tab-mismatch branch from 831cd2a to dca1082 Compare March 26, 2025 05:09
@laggage

laggage commented Mar 26, 2025

Copy link
Copy Markdown
Contributor Author

Here is a demo video may better explain the idea

Screen.Recording.2025-03-26.at.14.17.36.mov

PS: have no idea why the preview protal didn't take effect after force push and the success of build_site

Comment thread components/tabs/demo/link-router.ts Outdated
</a>
Four.
</nz-tab>
<nz-tab *ngFor="let tab of dynamicTabs">

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

使用 @for

tick();
fixture.detectChanges();

// tabs = fixture.debugElement.query(By.directive(NzTabSetComponent));

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

清理注释


@Component({
template: ` <nz-tabset nzLinkRouter [(nzSelectedIndex)]="selectedIdx" [nzLinkExact]="false">
<nz-tab *ngFor="let tab of tabs">

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

使用 @for

@laggage
laggage force-pushed the fix-link-tab-active-tab-mismatch branch from dca1082 to 51b18c2 Compare March 26, 2025 07:22
@laggage
laggage requested a review from Laffery March 26, 2025 07:24

@Laffery Laffery left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@ameckl

ameckl commented Apr 30, 2025

Copy link
Copy Markdown

This PR introduced a bug that is also confirmed by other users. Check it here: #9083

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Lazy loaded Tabs with Router always loads the first tab after page refresh

4 participants