Angular完整项目开发3 - 添加一个业务模块（component）

增加一个业务模块，例如“设备管理（device)”，在Angular也是一条指令生成，Angular中称之为组件（component)。

1. 添加组件（component)

ng generate component device

可以看到，一个完整模块的基本要素都自动生成好了，css/html/spec.ts/ts。另外，app.module.ts中也增加对应的声明。

  

2. 添加组件路径

app-routing.module.ts，

//components
import { DeviceComponent } from './device/device.component';
import { SysuserComponent } from './sysuser/sysuser.component';

//const routes: Routes = [];
const routes: Routes = [
  { path: 'device', component: DeviceComponent },
  { path: 'sysuser', component: SysuserComponent }
];

3. 查看效果

device.component.html中的内容是<p>device works!</p>，理论上来说，在浏览器中输入路径localhost:4200/device, 页面上就会展示“device works!”这句话，但实际输入这个路径，看上去还是一开始的界面，没看到这句话：

别着急，页面往下拉，发现确实有“device works!”这句话，但是在页面最底部：

原来这个路径跳转，是app.component.html底部的<router-outlet></router-outlet>标签在运作。

改善一下，把app.component.html中的大部分内容删掉，只留<router-outlet>，效果如下：

4. 不过瘾，再加一个组件

添加系统用户模块，并参考第2步添加组件路径。

ng generate component sysuser

localhost:4200/sysuser