-5

我正在尝试设置一个单页应用程序，其中包含一个顶部菜单栏、一个左侧垂直菜单和一个位于该菜单右侧的内容 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>
4

1 回答 1

0

为了使用角度路由器，您应该将 html-ones 链接替换为 angular routerLink，如下所示：

 <li>
     <a routerLink="/example0" >Example 0</a>
 </li>
于 2018-08-18T21:15:49.593 回答