我正在尝试设置单页应用程序，其中一个顶部菜单栏，一个左侧垂直菜单和一个内容div位于该菜单的右侧 .
我希望这取决于在任何这些菜单上用户的选择，内容div显示不同的信息 .
我在Angular IDE中创建了一个新项目：
我有我的index.html：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>testApp</title>
<base href="/">
<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>
这个index.html调用app-root控制器：
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';
}
在这个app.component.html我有路线：
<router-outlet></router-outlet>
和我的仪表板控制器：
<app-dashboard></app-dashboard>
在我的dashboard.component.html上，我有我的路由器插座和网站布局：
<router-outlet></router-outlet>
<div class="container">
<div class="topbar">
<div class="topbar-leftmenu">
TEST SYSTEM
</div>
<div class="topbar-rightmenu">
<a href="#home">User </a>
<a href="#notification">Notifications</a>
<a href="#news">About</a>
<a href="#contact">Contact</a>
<a href="#login">Login</a>
<a href="#register">Register</a>
</div>
</div>
<aside class="vertmenu">
<div class="scroll-sidebar">
<nav class="sidebar-nav">
<ul id="sidebarnav">
<li>
<a href="/index.html" >Dashboard</a>
</li>
<li>
<a href="/example0" >Example 0</a>
</li>
<li>
<a href="/example1" >Example1</a>
</li>
<li>
<a href="/Example2" >Example2</a>
</li>
</ul>
</nav>
<!-- End Sidebar navigation -->
</div>
<!-- End Sidebar scroll-->
</aside>
<div class="content" data-ng-view>
</div>
</div>
我在div类内容上设置了data-ng-view属性，因为这意味着那将是改变页面的div .
在我的app-routing.module.ts上，我有不同的菜单指向不同的控制器：
import { DashboardComponent } from '../dashboard/dashboard.component';
import { Example0Component } from '../example0/example0-list.component';
import { Example1Component } from '../example1/example1-list.component';
import { Example2Component } from '../example2/example2-list.component';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';
const routes: Routes = [
{
path: 'app.component.html',
component: DashboardComponent,
},
{
path: 'example0',
component: Example0ListComponent,
},
{
path: 'example1',
component: Example1ListComponent,
},
{
path: 'example2',
component: Example2ListComponent,
}
];
@NgModule({
imports: [
CommonModule,
RouterModule.forRoot(routes)
],
exports: [
RouterModule
],
declarations: []
})
export class AppRoutingModule { }
发生的事情是，每次点击菜单，整个页面都会重新加载 . 不仅如此，而且新调用组件的内容也将显示在顶部菜单和垂直菜单布局之前的html中 .
似乎路由没有正确设置 . 我怎么能保证当我进入我的dashboard.html代码片段时，路由将知道内容div将是呈现新组件html代码的那个？
编辑：
在一些反馈之后，我添加了新标签而不是href：
<ul id="sidebarnav">
<li>
<a routerLink="/app.component.html" >Dashboard</a>
</li>
<li>
<a routerLink="/example0" >example 0</a>
</li>
<li>
<a routerLink="/example1" >example 1</a>
</li>
<li>
<a routerLink="/example2" >example 2</a>
</li>
</ul>
1 回答
为了使用角度路由器，您应该将html-one链接替换为angular routerLink，如下所示：