使用ng2-admin搭建成熟可靠的后台系统 -- ng2-admin（三）

张宪坤发布于2019-08-21 18:00 / 2323人阅读

摘要：使用搭建成熟可靠的后台系统三完善动态表单添加样式。下一章会讲解，一个集成的服务，来完成我们的提交，在将来的篇章里会在我们的组件中加入使其变得更加灵活。

使用ng2-admin搭建成熟可靠的后台系统 -- ng2-admin（三） 完善动态表单

添加样式。

抽离组件。

添加组件样式

上一篇文章创建了两个，组件，现在使用bootstrap来给他们添加一些样式

首先需要一个公用的 scss ，然后是各个组件自身的样式

ctrl + p 打开 dynamic-form.component.ts 文件（打开文件方式不再复述）

在 @Component 装饰器处，添加 scss (ng2-madin 自带 bootstrap 样式库，所以不需要引入)

@Component({
  selector: "dynamic-form",
  templateUrl: "./dynamic-form.component.html",
  styleUrls: ["./dynamic-form.component.scss"],
  providers: [QuestionControlService]
})

随后创建 dynamic-form.component.scss 文件

form {
  .form-group {
    margin: 20px 0;
  }
}

同时还需要修改几个文件
dynamic-form.component.html 保存按钮添加一个 class

dynamic-form-question.html

最终效果如下，效果比之前好很多，后续我们会继续优化样式。

抽离组件

抽离组件的意思是，把 form 组件用到的所有组件都抽离出来作为一个多带带的组件库，可以有业务组件，也可以有完全解耦的功能组件，可以在多平台的时候发挥巨大的优势，后期也可以作为自己的一个组件库开源！

在 theme/components 下创建一个目录 dynamic-form-components

直接把 dymamic-form 目录下的 dynamic-form-base 目录迁移过去，记得把之前引入的文件路径修改一下，否则会报错

然后在新建的组件目录下，新建文件夹 dynamic-form-questions，用于装载我们即将创建的组件, 然后继续创建 dynamic-form-questions/input-textbox 目录

input-texbox.component.ts

import { Component, Input } from "@angular/core";
import { FormGroup } from "@angular/forms";

import { InputQuestion } from "../../dynamic-form-base/question-input";

@Component({
  selector: "input-textbox",
  templateUrl: "./input-textbox.component.html",
  styleUrls: ["./input-textbox.component.scss"]
})
export class InputTextboxComponent {
  @Input() question: InputQuestion;
  @Input() form: FormGroup;

  constructor() {}
}

input-texbox.component.html


  {{question.label}}

index.ts 该文件不再声明，读者自行根据引入路径添加即可

export * from "./input-textbox.component";

这样我们的组件就有了多带带的目录管理，涉及到多平台时，可以把组件多带带引入

同理读者尝试创建 InputSelectComponent

在 nga.module.ts 中注册这两个组件后，修改文件

dynamic-form-question.component.html

最终效果

看起来没有太大变化，实际上我们完成了组件的抽离，在未来的日子里，组件库会慢慢越来越多，创建更多高耦合性的组件，利用功能组件来组成业务组件，减少文件大小，将会是一个大工程。

下一章会讲解，一个集成的 service 服务，来完成我们的 form 提交，在将来的篇章里会在我们的 form 组件中加入 redux, subject 使其变得更加灵活。

GPU云服务器云服务器 php成熟系统网站后台的短信接口使用啥成熟的webrtc开源开源成熟的Webrtc

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90326.html

使用ng2-admin搭建成熟可靠的后台系统 -- ng2-admin（四）

摘要：使用搭建成熟可靠的后台系统四完善动态表单组件添加正则验证添加错误提示添加正则验证先来设置一些错误提示，以及添加正则验证上一章可能遗留了部分路径错误，可以自行调整邮箱格式不正确请选择这里是提供的一些正则使用ng2-admin搭建成熟可靠的后台系统 -- ng2-admin（四）完善动态表单组件添加正则验证添加错误提示添加正则验证先来设置一些错误提示，以及添加正则验证（...

HtmlCssJs 2019-08-21 18:35 评论0 收藏0
使用ng2-admin搭建成熟可靠的后台系统 -- ng2-admin（二）

摘要：使用搭建成熟可靠的后台系统二构建动态表单构建一个动态表单，动态生成控件，验证规则。现在来创建它的子组件从上面的组件可以看出，未来需要添加组件时，只需要添加一种类型，可以用决定显示哪种类型的问题。使用ng2-admin搭建成熟可靠的后台系统 -- ng2-admin（二） 1.构建动态表单构建一个动态表单，动态生成控件，验证规则。创建一个input组件，一个select组件将...

FleyX 2019-08-21 16:48 评论0 收藏0
使用ng2-admin搭建成熟可靠的后台系统 -- ng2-admin（六）

摘要：注意在配置完成后，需要重新启动项目使配置生效。每一行的内容，由数据内容决定，例如有三条数据，应显示三行数据，数据由组件自身请求获取，所以应该有一个自身的属性用于承载数据。注意这里将换成了，所以组件的也需要替换，否则会报错。使用ng2-admin搭建成熟可靠的后台系统 -- ng2-admin（六）完善动态表单组件先来张本章节最终效果图showImg(https://segmen...

bingo 2019-08-21 18:38 评论0 收藏0
使用ng2-admin搭建成熟可靠的后台系统 -- ng2-admin（五）

摘要：创建一个工具类，负责提供以及完成拼接参数的工作。根据我们的配置，来创建这个文件。因为是表单提交，所以我们新建一个服务，由它来完成表单提交的最后一步。使用ng2-admin搭建成熟可靠的后台系统 -- ng2-admin（五）完善动态表单组件升级Angular 4.1 -> 4.3 添加 json-server 模拟数据创建自己的 http 完成一次表单提交升级Angu...

MiracleWong 2019-08-21 18:36 评论0 收藏0
手游开发如何选择后端服务

摘要：云函数是万金油为实现用户游戏数据存储和每日任务分发，我们最先用了存储服务和云引擎。不过我们并没有用提供的来直接调用存储服务，而是选择用调用云引擎里面的云函数，然后通过云函数调用存储服务来实现相应的逻辑。【玩转 LeanCloud 】开发者投稿分享：作者：赵天泽作为一个通过 LeanCloud 入门后端开发的小白，一年多的开发历程让我收获满满。多个项目也在 LeanCloud 可...

codecook 2019-08-21 17:53 评论0 收藏0