(routing) Use "corrected" behavior for relative link resolution (https://github.com/angular/angular/pull/22394) as it's the default value starting from Angular v11 (https://github.com/angular/angular/pull/25609)

This commit is contained in:
sercan 2021-05-12 12:46:01 +03:00
parent 57ba071fa5
commit a9ada174b4
13 changed files with 40 additions and 148 deletions

View File

@ -15,8 +15,7 @@ import { appRoutes } from 'app/app.routing';
const routerConfig: ExtraOptions = {
scrollPositionRestoration: 'enabled',
preloadingStrategy : PreloadAllModules,
relativeLinkResolution : 'legacy'
preloadingStrategy : PreloadAllModules
};
@NgModule({

View File

@ -298,22 +298,15 @@ export class ContactsDetailsComponent implements OnInit, OnDestroy
return;
}
// Get the current activated route
let route = this._activatedRoute;
while ( route.firstChild )
{
route = route.firstChild;
}
// Navigate to the next contact if available
if ( nextContactId )
{
this._router.navigate(['../', nextContactId], {relativeTo: route});
this._router.navigate(['../', nextContactId], {relativeTo: this._activatedRoute});
}
// Otherwise, navigate to the parent
else
{
this._router.navigate(['../'], {relativeTo: route});
this._router.navigate(['../'], {relativeTo: this._activatedRoute});
}
// Toggle the edit mode off

View File

@ -78,11 +78,11 @@
</div>
</ng-container>
<!-- Contact -->
<div
<a
class="z-20 flex items-center px-6 py-4 md:px-8 cursor-pointer border-b"
[ngClass]="{'hover:bg-gray-100 dark:hover:bg-hover': !selectedContact || selectedContact.id !== contact.id,
'bg-primary-50 dark:bg-hover': selectedContact && selectedContact.id === contact.id}"
(click)="goToContact(contact.id)">
[routerLink]="['./', contact.id]">
<div class="flex flex-0 items-center justify-center w-10 h-10 rounded-full overflow-hidden">
<ng-container *ngIf="contact.avatar">
<img
@ -100,7 +100,7 @@
<div class="font-medium leading-5 truncate">{{contact.name}}</div>
<div class="leading-5 truncate text-secondary">{{contact.title}}</div>
</div>
</div>
</a>
</ng-container>
</ng-container>
</ng-container>

View File

@ -160,41 +160,13 @@ export class ContactsListComponent implements OnInit, OnDestroy
// @ Public methods
// -----------------------------------------------------------------------------------------------------
/**
* Go to contact
*
* @param id
*/
goToContact(id: string): void
{
// Get the current activated route
let route = this._activatedRoute;
while ( route.firstChild )
{
route = route.firstChild;
}
// Go to contact
this._router.navigate(['../', id], {relativeTo: route});
// Mark for check
this._changeDetectorRef.markForCheck();
}
/**
* On backdrop clicked
*/
onBackdropClicked(): void
{
// Get the current activated route
let route = this._activatedRoute;
while ( route.firstChild )
{
route = route.firstChild;
}
// Go to the parent route
this._router.navigate(['../'], {relativeTo: route});
// Go back to the list
this._router.navigate(['./'], {relativeTo: this._activatedRoute});
// Mark for check
this._changeDetectorRef.markForCheck();
@ -208,26 +180,14 @@ export class ContactsListComponent implements OnInit, OnDestroy
// Create the contact
this._contactsService.createContact().subscribe((newContact) => {
// Go to new contact
this.goToContact(newContact.id);
// Go to the new contact
this._router.navigate(['./', newContact.id], {relativeTo: this._activatedRoute});
// Mark for check
this._changeDetectorRef.markForCheck();
});
}
/**
* Get country code
*
* @param iso
*/
getCountryCode(iso: string): string
{
if ( !iso )
{
return '';
}
return this.countries.find((country) => country.iso === iso).code;
}
/**
* Track by function for ngFor loops
*

View File

@ -68,9 +68,9 @@
<ng-template
#item
let-item>
<div
<a
class="flex flex-col w-40 h-40 m-2 p-4 shadow rounded-2xl cursor-pointer bg-card"
(click)="goToItem(item.id)">
[routerLink]="['./', item.id]">
<div class="aspect-w-9 aspect-h-6">
<div class="flex items-center justify-center">
<!-- Icons -->
@ -109,7 +109,7 @@
<div class="text-secondary truncate">{{item.contents}}</div>
</ng-container>
</div>
</div>
</a>
</ng-template>
<!-- No items template -->

View File

@ -90,41 +90,13 @@ export class FileManagerListComponent implements OnInit, OnDestroy
// @ Public methods
// -----------------------------------------------------------------------------------------------------
/**
* Go to item
*
* @param id
*/
goToItem(id: string): void
{
// Get the current activated route
let route = this._activatedRoute;
while ( route.firstChild )
{
route = route.firstChild;
}
// Go to item
this._router.navigate(['../', id], {relativeTo: route});
// Mark for check
this._changeDetectorRef.markForCheck();
}
/**
* On backdrop clicked
*/
onBackdropClicked(): void
{
// Get the current activated route
let route = this._activatedRoute;
while ( route.firstChild )
{
route = route.firstChild;
}
// Go back to the parent route
this._router.navigate(['../'], {relativeTo: route});
// Go back to the list
this._router.navigate(['./'], {relativeTo: this._activatedRoute});
// Mark for check
this._changeDetectorRef.markForCheck();

View File

@ -4,13 +4,13 @@
<div class="flex flex-col items-center p-6 sm:p-10">
<div class="flex flex-col w-full max-w-4xl">
<div class="-ml-4 sm:mt-8">
<button
<a
mat-button
[routerLink]="['../']"
[color]="'primary'">
<mat-icon [svgIcon]="'heroicons_outline:arrow-narrow-left'"></mat-icon>
<span class="ml-2">Back to Help Center</span>
</button>
</a>
</div>
<div class="mt-2 text-4xl sm:text-7xl font-extrabold tracking-tight leading-tight">
Frequently Asked Questions

View File

@ -4,13 +4,13 @@
<div class="flex flex-col items-center p-6 sm:p-10">
<div class="flex flex-col w-full max-w-4xl">
<div class="-ml-4 sm:mt-8">
<button
<a
mat-button
[routerLink]="['../../../../']"
[routerLink]="['../']"
[color]="'primary'">
<mat-icon [svgIcon]="'heroicons_outline:arrow-narrow-left'"></mat-icon>
<span class="ml-2">Back to Help Center</span>
</button>
<span class="ml-2">Back to Guides & Resources</span>
</a>
</div>
<div class="mt-2 text-4xl sm:text-7xl font-extrabold tracking-tight leading-tight">
{{guideCategory.title}}

View File

@ -4,13 +4,13 @@
<div class="flex flex-col items-center p-6 sm:p-10">
<div class="flex flex-col w-full max-w-4xl">
<div class="-ml-4 sm:mt-8">
<button
<a
mat-button
[routerLink]="['../']"
[color]="'primary'">
<mat-icon [svgIcon]="'heroicons_outline:arrow-narrow-left'"></mat-icon>
<span class="ml-2">Back to {{guideCategory.title}}</span>
</button>
</a>
</div>
<div class="mt-2 text-4xl sm:text-7xl font-extrabold tracking-tight leading-tight">{{guideCategory.guides[0].title}}</div>
<div class="mt-1 sm:text-2xl tracking-tight text-secondary">{{guideCategory.guides[0].subtitle}}</div>

View File

@ -4,13 +4,13 @@
<div class="flex flex-col items-center p-6 sm:p-10">
<div class="flex flex-col w-full max-w-4xl">
<div class="-ml-4 sm:mt-8">
<button
<a
mat-button
[routerLink]="['../../../']"
[routerLink]="['../']"
[color]="'primary'">
<mat-icon [svgIcon]="'heroicons_outline:arrow-narrow-left'"></mat-icon>
<span class="ml-2">Back to Help Center</span>
</button>
</a>
</div>
<div class="mt-2 text-4xl sm:text-7xl font-extrabold tracking-tight leading-tight">
Guides & Resources

View File

@ -4,13 +4,13 @@
<div class="flex flex-col flex-auto items-center p-6 sm:p-10">
<div class="flex flex-col w-full max-w-4xl">
<div class="-ml-4 sm:mt-8">
<button
<a
mat-button
[routerLink]="['../']"
[color]="'primary'">
<mat-icon [svgIcon]="'heroicons_outline:arrow-narrow-left'"></mat-icon>
<span class="ml-2">Back to Help Center</span>
</button>
</a>
</div>
<div class="mt-2 text-4xl sm:text-7xl font-extrabold tracking-tight leading-tight">
Contact support

View File

@ -490,22 +490,15 @@ export class TasksDetailsComponent implements OnInit, AfterViewInit, OnDestroy
return;
}
// Get the current activated route
let route = this._activatedRoute;
while ( route.firstChild )
{
route = route.firstChild;
}
// Navigate to the next task if available
if ( nextTaskId )
{
this._router.navigate(['../', nextTaskId], {relativeTo: route});
this._router.navigate(['../', nextTaskId], {relativeTo: this._activatedRoute});
}
// Otherwise, navigate to the parent
else
{
this._router.navigate(['../'], {relativeTo: route});
this._router.navigate(['../'], {relativeTo: this._activatedRoute});
}
});

View File

@ -161,41 +161,13 @@ export class TasksListComponent implements OnInit, OnDestroy
// @ Public methods
// -----------------------------------------------------------------------------------------------------
/**
* Go to task
*
* @param id
*/
goToTask(id: string): void
{
// Get the current activated route
let route = this._activatedRoute;
while ( route.firstChild )
{
route = route.firstChild;
}
// Go to task
this._router.navigate(['../', id], {relativeTo: route});
// Mark for check
this._changeDetectorRef.markForCheck();
}
/**
* On backdrop clicked
*/
onBackdropClicked(): void
{
// Get the current activated route
let route = this._activatedRoute;
while ( route.firstChild )
{
route = route.firstChild;
}
// Go to the parent route
this._router.navigate(['../'], {relativeTo: route});
// Go back to the list
this._router.navigate(['./'], {relativeTo: this._activatedRoute});
// Mark for check
this._changeDetectorRef.markForCheck();
@ -211,8 +183,11 @@ export class TasksListComponent implements OnInit, OnDestroy
// Create the task
this._tasksService.createTask(type).subscribe((newTask) => {
// Go to new task
this.goToTask(newTask.id);
// Go to the new task
this._router.navigate(['./', newTask.id], {relativeTo: this._activatedRoute});
// Mark for check
this._changeDetectorRef.markForCheck();
});
}