成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

使用ng2-admin搭建成熟可靠的后臺系統(tǒng) -- ng2-admin（三）

張憲坤 / 2362人閱讀

摘要：使用搭建成熟可靠的后臺系統(tǒng)三完善動態(tài)表單添加樣式。下一章會講解，一個集成的服務(wù)，來完成我們的提交，在將來的篇章里會在我們的組件中加入使其變得更加靈活。

使用ng2-admin搭建成熟可靠的后臺系統(tǒng) -- ng2-admin（三） 完善動態(tài)表單 
添加樣式。


抽離組件。


添加組件樣式 
上一篇文章創(chuàng)建了兩個，組件，現(xiàn)在使用bootstrap來給他們添加一些樣式

首先需要一個公用的 scss ， 然后是各個組件自身的樣式

ctrl + p 打開 dynamic-form.component.ts 文件（打開文件方式不再復(fù)述）

在 @Component 裝飾器處，添加 scss (ng2-madin 自帶 bootstrap 樣式庫，所以不需要引入)

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

隨后創(chuàng)建 dynamic-form.component.scss 文件

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

同時還需要修改幾個文件
dynamic-form.component.html 保存按鈕添加一個 class

dynamic-form-question.html

最終效果如下，效果比之前好很多，后續(xù)我們會繼續(xù)優(yōu)化樣式。

抽離組件 
抽離組件的意思是，把 form 組件用到的所有組件都抽離出來作為一個多帶帶的組件庫，可以有業(yè)務(wù)組件，也可以有完全解耦的功能組件，可以在多平臺的時候發(fā)揮巨大的優(yōu)勢，后期也可以作為自己的一個組件庫開源！

在 theme/components 下創(chuàng)建一個目錄 dynamic-form-components

直接把 dymamic-form 目錄下的 dynamic-form-base 目錄遷移過去，記得把之前引入的文件路徑修改一下，否則會報錯

然后在新建的組件目錄下，新建文件夾 dynamic-form-questions，用于裝載我們即將創(chuàng)建的組件, 然后繼續(xù)創(chuàng)建 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

index.ts 該文件不再聲明，讀者自行根據(jù)引入路徑添加即可

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

這樣我們的組件就有了多帶帶的目錄管理，涉及到多平臺時，可以把組件多帶帶引入

同理讀者嘗試創(chuàng)建 InputSelectComponent

在 nga.module.ts 中注冊這兩個組件后，修改文件

dynamic-form-question.component.html

最終效果

看起來沒有太大變化，實際上我們完成了組件的抽離，在未來的日子里，組件庫會慢慢越來越多，創(chuàng)建更多高耦合性的組件，利用功能組件來組成業(yè)務(wù)組件，減少文件大小，將會是一個大工程。

下一章會講解，一個集成的 service 服務(wù)，來完成我們的 form 提交，在將來的篇章里會在我們的 form 組件中加入 redux, subject 使其變得更加靈活。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/90326.html

相關(guān)文章

  • 使用ng2-admin搭建成熟可靠的后臺系統(tǒng) -- ng2-admin（四）

    摘要：使用搭建成熟可靠的后臺系統(tǒng)四完善動態(tài)表單組件添加正則驗證添加錯誤提示添加正則驗證先來設(shè)置一些錯誤提示，以及添加正則驗證上一章可能遺留了部分路徑錯誤，可以自行調(diào)整郵箱格式不正確請選擇這里是提供的一些正則 使用ng2-admin搭建成熟可靠的后臺系統(tǒng) -- ng2-admin（四） 完善動態(tài)表單組件 添加正則驗證 添加錯誤提示 添加正則驗證 先來設(shè)置一些錯誤提示，以及添加正則驗證（...

    HtmlCssJs 評論0 收藏0

  • 使用ng2-admin搭建成熟可靠的后臺系統(tǒng) -- ng2-admin（二）

    摘要：使用搭建成熟可靠的后臺系統(tǒng)二構(gòu)建動態(tài)表單構(gòu)建一個動態(tài)表單，動態(tài)生成控件，驗證規(guī)則?，F(xiàn)在來創(chuàng)建它的子組件從上面的組件可以看出，未來需要添加組件時，只需要添加一種類型，可以用決定顯示哪種類型的問題。 使用ng2-admin搭建成熟可靠的后臺系統(tǒng) -- ng2-admin（二） 1.構(gòu)建動態(tài)表單 構(gòu)建一個動態(tài)表單，動態(tài)生成控件，驗證規(guī)則。 創(chuàng)建一個input組件，一個select組件 將...

    FleyX 評論0 收藏0

  • 使用ng2-admin搭建成熟可靠的后臺系統(tǒng) -- ng2-admin（六）

    摘要：注意在配置完成后，需要重新啟動項目使配置生效。每一行的內(nèi)容，由數(shù)據(jù)內(nèi)容決定，例如有三條數(shù)據(jù)，應(yīng)顯示三行數(shù)據(jù)，數(shù)據(jù)由組件自身請求獲取，所以應(yīng)該有一個自身的屬性用于承載數(shù)據(jù)。注意這里將換成了，所以組件的也需要替換，否則會報錯。 使用ng2-admin搭建成熟可靠的后臺系統(tǒng) -- ng2-admin（六） 完善動態(tài)表單組件 先來張本章節(jié)最終效果圖showImg(https://segmen...

    bingo 評論0 收藏0

  • 使用ng2-admin搭建成熟可靠的后臺系統(tǒng) -- ng2-admin（五）

    摘要：創(chuàng)建一個工具類，負責提供以及完成拼接參數(shù)的工作。根據(jù)我們的配置，來創(chuàng)建這個文件。因為是表單提交，所以我們新建一個服務(wù)，由它來完成表單提交的最后一步。 使用ng2-admin搭建成熟可靠的后臺系統(tǒng) -- ng2-admin（五） 完善動態(tài)表單組件 升級Angular 4.1 -> 4.3 添加 json-server 模擬數(shù)據(jù) 創(chuàng)建自己的 http 完成一次表單提交 升級Angu...

    MiracleWong 評論0 收藏0

  • 手游開發(fā)如何選擇后端服務(wù)

    摘要：云函數(shù)是萬金油為實現(xiàn)用戶游戲數(shù)據(jù)存儲和每日任務(wù)分發(fā)，我們最先用了存儲服務(wù)和云引擎。不過我們并沒有用提供的來直接調(diào)用存儲服務(wù)，而是選擇用調(diào)用云引擎里面的云函數(shù)，然后通過云函數(shù)調(diào)用存儲服務(wù)來實現(xiàn)相應(yīng)的邏輯。 【 玩轉(zhuǎn) LeanCloud 】開發(fā)者投稿分享： 作者：趙天澤 作為一個通過 LeanCloud 入門后端開發(fā)的小白，一年多的開發(fā)歷程讓我收獲滿滿。多個項目也在 LeanCloud 可...

    codecook 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<