У меня есть модуль приложения, консольный модуль и модуль входа в систему. Вот некоторые коды ключей: < /p>
[*] App.html
< /ol>
Код: Выделить всё
< /code>
[*] App.routes.ts
< /ol>
import { Routes } from '@angular/router';
import { Login } from './login/login/login';
import { Console } from './console/console/console';
export const routes: Routes = [
{ path: '', pathMatch: 'full', redirectTo: '/login' },
{ path: 'login', component: Login, loadChildren: () => import('./login/login-module').then(m => m.LoginModule) },
{ path: 'console', component: Console, loadChildren: () => import('./console/console-module').then(m => m.ConsoleModule) },
];
< /code>
[*] App.config.ts
< /ol>
import { ApplicationConfig, provideBrowserGlobalErrorListeners, provideZonelessChangeDetection } from '@angular/core';
import { PreloadAllModules, provideRouter, RouteReuseStrategy, withPreloading } from '@angular/router';
import { routes } from './app.routes';
import { provideClientHydration, withEventReplay } from '@angular/platform-browser';
import { provideHttpClient } from '@angular/common/http';
import { SimpleReuseStrategy } from './console/SimpleReuseStrategy';
export const appConfig: ApplicationConfig = {
providers: [
provideHttpClient(),
provideBrowserGlobalErrorListeners(),
provideZonelessChangeDetection(),
provideRouter(routes,withPreloading(PreloadAllModules)),
provideClientHydration(withEventReplay()),
{
provide: RouteReuseStrategy, useClass: SimpleReuseStrategy
}
]
};
< /code>
[*]console-routing-module.ts
< /ol>
import { NgModule } from '@angular/core';
import { Router, RouterModule, Routes } from '@angular/router';
import { PageList } from './page-list/page-list';
import { Console } from './console/console';
import { CreatePage } from './create-page/create-page';
import { WordList } from './word-list/word-list';
const routes: Routes = [{
path: 'console', component: Console,
children: [
{ path: '', redirectTo: 'createPage', pathMatch: 'full' },
{ path: 'createPage', component: CreatePage, data: { keep: true, key: 'createPage' } },
{ path: 'pageList', component: PageList, data: { keep: true, key: 'pageList' } },
{ path: 'wordList', component: WordList, data: { keep: true, key: 'wordList' } },
{ path: '**', component: CreatePage }
]
}];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class ConsoleRoutingModule {
constructor(private router:Router) {
console.log(this.router.config);
}
ngOnInit() {
}
}
< /code>
[*]console-module.ts
< /ol>
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ConsoleRoutingModule } from './console-routing-module';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatNativeDateModule } from '@angular/material/core';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatDividerModule } from '@angular/material/divider';
import { MatIconModule } from '@angular/material/icon';
import { MatMenuModule } from '@angular/material/menu';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatSelectModule } from '@angular/material/select';
import { MatSnackBarModule } from '@angular/material/snack-bar';
import { Console } from './console/console';
import { PageList } from './page-list/page-list';
import { CreatePage } from './create-page/create-page';
import { Router } from '@angular/router';
@NgModule({
declarations: [Console, PageList, CreatePage],
imports: [
CommonModule, MatButtonModule, MatMenuModule, MatDividerModule, MatIconModule, MatSnackBarModule, MatSelectModule, MatDatepickerModule, MatNativeDateModule, MatPaginatorModule,
MatButtonModule, MatMenuModule, MatSelectModule,
MatDatepickerModule, MatPaginatorModule, MatSnackBarModule,
MatDividerModule, MatIconModule,
FormsModule, ReactiveFormsModule,
ConsoleRoutingModule
]
})
export class ConsoleModule {
constructor(private router: Router) {
}
ngOnInit() {
}
}
< /code>
[*]console.html
< /ol>
文章
写文章
文章列表
单词
(click)="onMenuClick('wordList')">单词列表
< /code>
[*]console.ts
< /ol>
import { Component, inject } from '@angular/core';
import { Router } from '@angular/router';
@Component({
selector: 'app-console',
//imports: [CommonModule, RouterModule, RouterOutlet],
standalone:false,
templateUrl: './console.html',
styleUrl: './console.scss'
})
export class Console {
private router = inject(Router);
menuText: string = 'createPage';
onMenuClick(text: string) {
this.menuText = text;
this.router.navigate(['../' + this.menuText])
}
}
< /code>
8.page-list.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-page-list',
standalone:false,
//imports: [],
templateUrl: './page-list.html',
styleUrl: './page-list.scss'
})
export class PageList {
}
Подробнее здесь: https://stackoverflow.com/questions/797 ... or-ng04002
