我想实现我的routing
配置,并确保基本的SPA
App中的Angular
方面!但是问题是没有创建我的components
,我的目的是在不创建某些特定routing
的情况下通过我的SideNav
中的链接实现components
!因此,我保证了routing
的安全,但是navigation
从链接到链接的链接并没有嵌入SPA
内容;因此SPA
方面不可用!
app-routing.module.ts
import { NgModule } from '@angular/core';
@NgModule({ // routes has the route configuration.
// It is a variable of type Routes
imports: [RouterModule.forRoot(routes)], /* there is some error here routes isnt defined ,I knew
I have sould have implemented paths and components
but like i clarifed above there is a component
parameter for forRoot() method . In my case I had no
compenets I have only links */
exports: [RouterModule]
})
export class AppRoutingModule {
}
main-nav.component.html
<mat-sidenav
#drawer class="sidenav" fixedInViewport="true"
[attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
[mode]="(isHandset$ | async) ? 'over' : 'side'"
[opened]="!(isHandset$ | async)">
<mat-toolbar>Menu</mat-toolbar>
<mat-nav-list>
<a mat-list-item href="City1">City 1</a> <!-- link1 whom I want to apply SPA aspect -->
<a mat-list-item href="City2">City 2</a> <!-- link2 whom I want to apply SPA aspect -->
<a mat-list-item href="City3">City 3</a> <!-- link3 whom I want to apply SPA aspect -->
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content>
<mat-toolbar color="primary">
<button
type="button"
aria-label="Toggle sidenav"
mat-icon-button
(click)="drawer.toggle()"
*ngIf="isHandset$ | async">
<mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
</button>
<span>City-routing</span>
</mat-toolbar>
<!-- Add Content Here -->
</mat-sidenav-content>
</mat-sidenav-container>
如果不使用路由,只需传递一个空数组,例如波纹管:
RouterModule.forRoot([]);