国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

張憲坤 / 2353人閱讀

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

使用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

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

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

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

同理讀者嘗試創建 InputSelectComponent

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

dynamic-form-question.component.html

最終效果

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

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/90326.html

相關文章

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

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

    HtmlCssJs 評論0 收藏0

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

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

    FleyX 評論0 收藏0

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

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

    bingo 評論0 收藏0

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

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

    MiracleWong 評論0 收藏0

  • 手游開發如何選擇后端服務

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

    codecook 評論0 收藏0

發表評論

0條評論

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