我有一个角度项目设置如下：
app.component.html
<body>
<app-top-header></app-top-header>
<div class="wrapper">
<aside>
<app-main-menu></app-main-menu>
</aside>
<main>
<div class="wrapper_inner">
<router-outlet></router-outlet>
</div>
</main>
</div>
</body>
app.component.ts
import { Component } from '@angular/core';
import { Router, RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
import { MainMenuComponent } from './navigation/main-menu/main-menu.component';
import { TopHeaderComponent } from './top-header/top-header.component';
@Component({
selector: 'app-root',
standalone: true,
imports: [MainMenuComponent, TopHeaderComponent, RouterOutlet, RouterLink, RouterLinkActive],
templateUrl: './app.component.html',
styleUrl: './app.component.scss'
})
export class AppComponent {
title = 'app';
constructor(private router: Router) { }
ngOnInit() {
// this.router.navigate(['splash-component']); // Navigate to the default route
}
}
app-main-menu 是一个单独的组件，它有一个 li-a 链接列表，我希望单击菜单来更改 app.component 页面上的路由器出口内容。
MainMenuComponent html (extract)
<li><a href="#">Inventory</a>
<ul class="submenu">
<li><a routerLink="/inventory-component"
routerLinkActive="active">Inventory</a></li>
</ul>
</li>
在app.routes.ts中设置路由
import { Routes } from '@angular/router';
import { SplashComponent } from './views/splash/splash.component';
import { InventoryComponent } from './views/inventory/inventory.component';
export const routes: Routes = [
// Content Components
{ path: 'splash-component', component: SplashComponent },
{ path: 'inventory-component', component: InventoryComponent }
];
目前没有任何反应，但如果我将链接放在 app.component.html 上，路线就可以工作。我怎样才能从菜单中使用它？
首先从应用程序 html 中删除 body 标签。它们应该只出现在index.html中
<app-top-header></app-top-header>
<div class="wrapper">
<aside>
<app-main-menu></app-main-menu>
</aside>
<main>
<div class="wrapper_inner">
<router-outlet></router-outlet>
</div>
</main>
</div>
然后确保您的index.html具有基本href标签。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Tour of Heroes</title>
<base href="/"> <!-- should contain this -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>