JavaScript Angular Routing - 'best practice' weit entfernt

[-Rayz-]

Guten Morgen

ich denke ich fange mal vorne an.. :-)
In dem app.module habe ich meine routes und mein (einziges) router-outlet ist in der app.component.html.
Meine Navigation ist auch in der app....html.

const routes: Routes = [
    {
        path: 'home',
        component: HomeComponent,
        data: {animation: 'Home'}
    },
    {
        path: 'devices',
        loadChildren: () => import('./devices/devices.module').then(mod => mod.DevicesModule),
        data: {animation: 'Devices'}
    },
    {
        path: '',
        redirectTo: 'home',
        pathMatch: 'full',
    }
];

@NgModule({
    imports: [
        RouterModule.forRoot(routes)
    ],
    exports: [RouterModule],
    providers: []
})
export class RoutingModule { }

Im DevicesModule geht es so weiter:

@NgModule({
    declarations: [DevicesComponent, DeviceDetailComponent],
    imports: [
        CommonModule,
        DevicesRoutingModule,
        DateModule,
        BundleModule
    ],
    exports: []
})
export class DevicesModule {
}

const routes: Routes = [
    {
        path: '',
        component: DevicesComponent,
        data: {animation: 'Devices'}
    },
    {
        path: 'device/:id',
        component: DeviceDetailComponent,
        data: {animation: 'Device'}
    }
];

@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
})
export class DevicesRoutingModule { }

Unter devices ist eine Auflistung aller Geräte. der Pfad "device/:id" ist dann die Detailansicht eines Gerätes. Jedes Gerät hat als Footer meine BundleComponent:

@NgModule({
    declarations: [BundleFooterComponent],
    imports: [
        CommonModule
    ],
    exports: [
        BundleFooterComponent
    ]
})
export class BundleModule {
}

Hier die Einbindung:

<div class="container device-detail" [@reload]="state">
    <div *ngIf="showComponent">
        ....
        <div>
            <app-bundle-footer
                    [Type]=bundleCategorie
                    [Id]="DeviceId"
                    (SelectedId)="callURL($event)">
            </app-bundle-footer>
        </div>
    </div>
</div>

In der BundleComponent zeige ich alle Bundles an, die zu dem Gerät passen. Die Anzeige beinhaltet dann eine weitere Auflistung von Geräten. Klickt man auf eines dieser Geräte, soll sich das Gerät natürlich öffnen. Eigentlich wollte ich einfach einen routerlink im Bundle angeben:

<div class="bundles" *ngFor="let bundle of DeviceBundles">
    <div class="bundles-items" *ngFor="let device of bundle.items;let l = last">
        <img [src]="device.thumb.asset" routerLink="/devices/device/{{device.id}}">
        ...
    </div>
    ...
</div>

Aber es erfolgt.... nichts. Zwar wird meine router-outlet aufgerufen aber die Component wird nicht neu geladen.

Ich habe zwar einen Workaround aber der ist wirklich... WIRKLICH schlecht:
Statt dem routerlink rufe ich ein Event auf: <img [src]="device.thumb.asset" (click)="routeTo(device.id)">

export class BundleFooterComponent implements OnInit {
...
    @Output() SelectedId = new EventEmitter<number>();
   ...
    routeTo(id: number) {
        this.SelectedId.emit(id);
    }
}

In der Detailansicht reagiere ich auf dieses Event:

callURL(id: number) {
        this.state = 'load';
        this.DeviceId = id;
        this.router.navigate(['/devices/device/' + id]);
        setTimeout(x => {
this.showComponent = false;

        }, 100);
        setTimeout(x => {
            window.scrollTo({ top: 0, behavior: 'smooth' });
            this.showComponent = true;
            this.state = 'normal';
        }, 400);
    }

Am Anfang der Detailansicht habe ich ein <div *ngIf="showComponent">. Ändert sich der wert, erfolgt ja aus Angularsicht ein Reload der Seite. Damit der Übergang nicht so hart ist, habe ich dafür eine Animation eingebunden:

   animations: [
...
            trigger('reload', [
                state('normal', style({
                    opacity: 1
                })),
                state('load', style({
                    opacity: 0
                })),
                transition('normal <=> load', animate(200))
            ]),
    ]

und das alles nur weil der routerlink nicht funktioniert und da ich ein bisschen auf dem Schlauch stehe, hoffe ich dass ihr mir weiterhelfen könnt.

Danke :-)

 

[benneq]

Du verwendest routerLink falsch.
routerLink setzt das "href" attribut. Aber ein <img> hat sowas nicht.
Also solltest du <a routerLink=""><img></a> benutzen.

Zum Testen kannst du auch einfach mit der Maus über deinen Link gehen. Dann sollte unten links im Browser (zumindest in Chrome) die URL stehen, die aufgerufen werden würde, wenn du klickst. Sobald du das siehst, kannst du auf jeden Fall sicher sein, dass der Link funktioniert.

(und gewöhn dir an, deine Properties klein zu schreiben. Wir sind hier nicht bei C# )

 

[-Rayz-]

Ne daran liegt es nicht. Die URL aktualisiert sich zwar beim Klick auf den Link aber der Inhalt der Component wird nicht aktualisiert.
Ich hab es auch schon mit route.navigate innerhalb der BundleComponent versucht. Ergab aber keinen Unterschied.

....
(und gewöhn dir an, deine Properties klein zu schreiben. Wir sind hier nicht bei C# )

Dieses ständige hin und her verwirrt aber auch
Ich korrigiere es :-)

 

[benneq]

Könntest du sonst evtl. ein kleines Beispiel mit dem Problem auf StackBlitz (o.Ä.) erstellen?