Question

我试图设置一个单页应用程序，其中包含一个顶部菜单栏，一个左侧垂直菜单和一个位于该菜单右侧的内容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调用应用程序根控制器：

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>

Answer 1

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

 <li>
     <a routerLink="/example0" >Example 0</a>
 </li>

使用Angular IDE在我的单页应用程序上设置路由

1 个答案: