错误：无法匹配任何路由。 URL 段：在 Angular 13

Question

i have two classes: Fichier and Dossier. I'm trying to show details files according to the id of the file meaning everytime I click on a file in front I want a detail page that belongs to that file to show. this is my code: this is my HTML of the file list:

<div>
            <div class="font-medium">Files</div>
            <div class="flex flex-wrap -m-2 mt-2" *ngIf="this.filtersLoaded === true">
                   <ng-container *ngFor="let file of this.fileList">
                    <a
                    class="flex flex-col w-40 h-40 m-2 p-4 shadow rounded-2xl cursor-pointer bg-card"
                    [routerLink]="['./details/', file.id]">
                    <div class="aspect-w-9 aspect-h-6">

                    <div class="flex items-center justify-center">
                                <!--Icons-->
                                <div class="relative">
                                    <mat-icon class="icon-size-14 text-hint" [svgIcon]="'iconsmind:file'"></mat-icon>
                                    <div
                                        class="absolute left-0 bottom-0 px-1.5 rounded text-sm font-semibold leading-5 text-white"
                                        [class.bg-red-600]="file.type === '.pdf'"
                                        [class.bg-pink-600]="file.type === '.pptx'"
                                        [class.bg-blue-600]="file.type === '.docx'"
                                        [class.bg-green-600]="file.type === '.xlsx'"
                                        [class.bg-gray-600]="file.type === '.txt'"
                                        [class.bg-amber-600]="file.type === '.jpg'">
                                        {{file.type.toUpperCase()}}
                                    </div>

                                    </div>
                            </div>
                        </div>
                        <div class="flex flex-col flex-auto justify-center text-center text-sm font-medium">
                            <div class="truncate"
                                [matTooltip]="file.filename">
                                {{file.filename}}</div>
                        </div>
                </a>
                </ng-container>

            </div>
        </div>

and this is my list file component:

selectedItem: Fichier;
items: Items;
files: Fichier;
file: Fichier;
fileList: Fichier[]= [];
filtersLoaded = false;
filterLoaded = false;
 constructor(
    private _activatedRoute: ActivatedRoute,
    private _changeDetectorRef: ChangeDetectorRef,
    private _router: Router,
    private _fileManagerService: FileManagerService,
    private _fuseMediaWatcherService: FuseMediaWatcherService,
    private _httpClient: HttpClient,
    private dialog: MatDialog ,

)
{
}

    ngOnInit(): void {
        console.log('hh');
        this._fileManagerService.getFileByFolder(this._activatedRoute.snapshot.paramMap.get('idD'))
        .subscribe((data: any) => {
        this.fileList = data.Files;
        this.filtersLoaded = true;
        this._changeDetectorRef.markForCheck();
        console.log('fileees '+JSON.stringify(this.fileList));
        });
        // Get the item
        this._fileManagerService.file$
        .pipe(takeUntil(this._unsubscribeAll))
        .subscribe((file: Fichier) => {
            this.selectedItem = file;

            // Mark for check
            this._changeDetectorRef.markForCheck();
        });

    // Subscribe to media query change
    this._fuseMediaWatcherService.onMediaQueryChange$('(min-width: 1440px)')
        .pipe(takeUntil(this._unsubscribeAll))
        .subscribe((state) => {

            this._changeDetectorRef.markForCheck();
        });
}

and this is my routing file:

{
                path     : '',
                component: FileManagerListComponent,
                resolve  : {
                    items: FileeManagerItemsResolver
                },
            },
            {
                path         : 'dossier/:idD',
                component    : FilesManagerListComponent,
                resolve      : {
                    items: FileManagerFolderResolver
                }, children: [
                    {
                        path         : '/details/:id',
                        component    : FichierManagerDetailsComponent,
                        resolve      : {
                            item: FileManagerItemResolver
                        }}
                ],
                canDeactivate: [CanDeactivateFileManagerDetails]
            },
           /*  {
                path         : 'details/:id',
                component    : FichierManagerDetailsComponent,
                resolve      : {
                    item: FileManagerItemResolver
                }
            },*/


        ]

        }

and this is my details HTML: `<div *ngIf="file" class="flex flex-col flex-auto p-6 md:p-8">

<!-- Close button -->
<div class="flex items-center justify-end">
    <button
        mat-icon-button
        [routerLink]="['../../']">
        <mat-icon [svgIcon]="'heroicons_outline:x'"></mat-icon>
    </button>
</div>

<!-- Preview -->
<div class="aspect-w-9 aspect-h-6 mt-8">
    <div class="flex items-center justify-center border rounded-lg bg-gray-50 dark:bg-card">
        <ng-container *ngIf="file.type === 'folder'">
            <mat-icon
                class="icon-size-14 text-hint"
                [svgIcon]="'iconsmind:folder'"></mat-icon>
        </ng-container>
        <ng-container *ngIf="file.type !== 'folder'">
            <mat-icon
                class="icon-size-14 text-hint"
                [svgIcon]="'iconsmind:file'"></mat-icon>
        </ng-container>
    </div>
</div>

<!-- Name & Type -->
<div class="flex flex-col items-start mt-8">
    <div class="text-xl font-medium">{{file.filename}}</div>
    <div
        class="mt-1 px-1.5 rounded text-sm font-semibold leading-5 text-white"
        [class.bg-indigo-600]="file.type === 'folder'"
        [class.bg-red-600]="file.type === '.pdf'"
        [class.bg-pink-600]="file.type === '.pptx'"
        [class.bg-blue-600]="file.type === '.docx'"
        [class.bg-green-600]="file.type === '.xlsx'"
        [class.bg-gray-600]="file.type === '.txt'"
        [class.bg-amber-600]="file.type === '.jpg'">
        {{file.type.toUpperCase()}}
    </div>
</div>

<!-- Information -->
<div class="text-lg font-medium mt-8">Information</div>
<div class="flex flex-col mt-4 border-t border-b divide-y font-medium">
    <div class="flex items-center justify-between py-3">
        <div class="text-secondary">File Name</div>
        <div>{{file.filename}}</div>
    </div>
    <div class="flex items-center justify-between py-3">
        <div class="text-secondary">Size</div>
        <div>{{file.size}}</div>
    </div>
</div>

<!-- Description -->
<div class="flex items-center justify-between mt-8">
    <div class="text-lg font-medium">Description</div>
    <button mat-icon-button>
        <mat-icon
            class="icon-size-5"
            [svgIcon]="'heroicons_solid:pencil'"></mat-icon>
    </button>
</div>
<div class="flex mt-2 border-t">
    <div class="py-3">
        <ng-container *ngIf="file.description">
            <div>{{file.description}}</div>
        </ng-container>
        <ng-container *ngIf="!file.description">
            <div class="italic text-secondary">Click here to add a description</div>
        </ng-container>
    </div>
</div>

<!-- Actions -->
<div class="grid grid-cols-2 gap-4 w-full mt-8">
    <button
        class="flex-auto"
        mat-flat-button
        [color]="'primary'"
        (click)="download()">
        Download
    </button>
    <button
        class="flex-auto"
        mat-stroked-button
        (click)="delete()">
        Delete
    </button>
</div>

`

and my details component:

 file: Fichier; file2: Fichier; routervar: string; files = []; constructor( private _changeDetectorRef: ChangeDetectorRef, private _fileManagerListComponent: FileManagerListComponent, private _fileManagerService: FileManagerService, private route: ActivatedRoute ) { } ngOnInit(): void { console.log('lol'); //console.log('detailstriggerd'); // this.routervar = this.route.snapshot.params.id; // Open the drawer this._fileManagerListComponent.matDrawer.open(); // Get the item // this._fileManagerService.file$ this._fileManagerService.getFileById(this.route.snapshot.params.id).pipe(takeUntil(this._unsubscribeAll)).subscribe((data: Fichier) => { // Open the drawer in case it is closed this._fileManagerListComponent.matDrawer.open(); // Get the item this.file = data; console.log('data',data); // Mark for check this._changeDetectorRef.markForCheck(); }); }

when I try and click on file to show details this is the error that I get:

if you guys have any idea how to fix this please help! Thank you

Answer 1

remove fist / in details route

{
path: 'details/:id',
    component    : FichierManagerDetailsComponent,
        resolve      : {
    item: FileManagerItemResolver
}

}

instead of

{
path: '/details/:id',
    component    : FichierManagerDetailsComponent,
        resolve      : {
    item: FileManagerItemResolver
}

}