Question

我需要开发单页面应用程序，它应该包含以下“页面”： 1.登录页面非常简单 2.主页面左侧和屏幕的其余部分带有导航菜单，应显示所选部分的具体内容。

我知道路由基础，所以我创建了以下路由器：

import { Routes } from "@angular/router";

import { LoginComponent } from "../login/login.component";
import { HomeComponent } from "../home/home.component";

export const routes: Routes = [
    { path: 'login', component: LoginComponent },
    { path: 'home', component: HomeComponent },
    { path: '', redirectTo: 'login', pathMatch: 'full' }
]

它允许我使用按钮的routerLink属性在登录页面和主页之间切换。

第一个问题是如何使用主页上的导航菜单实现各部分之间的切换？想象一下，我在导航菜单中有“客户”和“报告”部分（每个部分都有自己的功能，按钮，标签等）。如何实现到这些模块的路由？这是我的草案代码：

<mat-sidenav-container fullscreen>
  <mat-sidenav #sidenav mode="side" opened="true">
    <div fxLayout="column"> 
        <button mat-button>Clients</button>
        <button mat-button>Reports</button>
    </div>
 </mat-sidenav>

  <div>
    Some content specific for section here
  </div>

</mat-sidenav-container>

我的第二个问题是我项目的正确层次结构是什么？登录和主页应该是单独的模块吗？我应该如何组织（在模块/组件方面）主页的主要内容，这些内容将根据所选部分而改变？

Answer 1

1）您可以使用routerLink属性创建指向各种路线的链接。例如，您可以设计一个类似于：

的导航栏

<nav>
  <a routerLink="/home"> Home </a>
  <a routerLink="/login"> Login </a>
</nav>

more about this syntax is here.

2）对于模块：创建多个模块的主要好处是可以lazy load它们 - 也就是说，仅在激活某个路径后才加载模块。因此，标准是为网站的每个功能组件创建单独的模块。例如 - 如果我要设计一个模拟谷歌驱动器的Angular 2应用程序，我将有单独的模块用于用户登录，目录视图，文档编辑器，电子表格编辑器，演示文稿编辑器等 - 因为加载了不同的代码，具体取决于路线。

对于组件：我认为创建单独组件有两个原因：1）在for循环内的不同视图/组件之间重用代码，2）将代码分成更好的逻辑部分用于数据建模。通常，我为每个视图（/account）创建一个单独的组件，然后在重用组件时创建其他组件。

Answer 2

1）您可以通过模板中的routerLink进行导航

<nav class="nav">
  <div class="nav-item" routerLink="/login" routerLinkActive="active" (click)="scrollToTop()">
    login
  </div>
  <div class="nav-item" routerLink="/home" routerLinkActive="active" (click)="scrollToTop()">
    home
  </div>
</nav>

2）我更喜欢每个功能使用一个单独的模块（功能模块），并配有自己的路由模块。它保持一切清洁。如需进一步阅读，您可以访问角度样式指南：https://angular.io/guide/styleguide#feature-modules

Angular 2导航菜单路由

2 个答案: