国产99久久精品_欧美日本韩国一区二区_激情小说综合网_欧美一级二级视频_午夜av电影_日本久久精品视频

最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
當前位置: 首頁 - 科技 - 知識百科 - 正文

Angular 4根據組件名稱動態創建出組件的方法教程

來源:懂視網 責編:小采 時間:2020-11-27 22:26:34
文檔

Angular 4根據組件名稱動態創建出組件的方法教程

Angular 4根據組件名稱動態創建出組件的方法教程:一、理解angular組件 組件是一種特殊的指令,使用更簡單的配置項來構建基于組件的應用程序架構,這樣他能簡單地寫app,通過類似的web Component 或者angular2的樣式。web Component 是一個規范。馬上就要成為標準。 應用組件的優點: 比普通指令配置還簡
推薦度:
導讀Angular 4根據組件名稱動態創建出組件的方法教程:一、理解angular組件 組件是一種特殊的指令,使用更簡單的配置項來構建基于組件的應用程序架構,這樣他能簡單地寫app,通過類似的web Component 或者angular2的樣式。web Component 是一個規范。馬上就要成為標準。 應用組件的優點: 比普通指令配置還簡

一、理解angular組件

組件是一種特殊的指令,使用更簡單的配置項來構建基于組件的應用程序架構,這樣他能簡單地寫app,通過類似的web Component 或者angular2的樣式。web Component 是一個規范。馬上就要成為標準。

應用組件的優點:

  • 比普通指令配置還簡單
  • 提供更好的默認設置和最好的實踐
  • 對基于組建的應用架構更優化。
  • 對angular2的升級更平滑。
  • 不用組建的情況:

  • 對那些在 compile或者pre-link階段要執行操作的指令,組件不能用,因為無法到達那個階段。
  • 如果你想定義指令的 priority,terminal,multi-element,也不能用。
  • 組件只能通過元素標簽觸發,其他的只能用命令。
  • 二、動態創建組件

  • 說說場景先,比我寫了一些組件,這此組件內容都很少,彈出的對話框也許只有一行數據,也有可能是一個表單等,或都一些多選的,單選的選項等。
  • 網上有好多,動態創建組件的Demo,都不是很滿意,愿意就是要動態創建組件的時候,傳入的你即將要創建的組件對象進去,然后把這個放到頁面里顯示出來。這算什么動態創建呀,我就想傳一個組件的名字,然后就能把他創建出來。
  • 之前寫過C#動態創建類,都是給一個類的名稱,然后通過反射將類創建出來,然后能過接口過濾轉成接口調用方法或, invoke 某個方法等進行操作。像這種才是我想要的效果。
  • 給個名稱,然后就把這個組件創建出來,通過輸入一些參數對創建出來的組件進行賦值,輸出一些參數(主就輸出是事件了,比較點擊組件上的按鈕觸發相應的事件等)。
  • 說了這么多,先來個例子吧。


    上面那張圖很簡單就是一個輸入文本的一個彈框。

    下面這個就有點復雜了,有數據傳入,事件綁定等

    主了調用起來方便,我把這些都封裝成了一個方法:三個參數

  • 要創建的組件名稱
  • 要傳入組件的參數
  • 組件輸出的事件
  •  Utility.$ShowDialogComponent('ComponentName', {
     Params1,Params2...
     }, {
     onEventName1:()=>{},
     ...
     });

    由于我動態創建的組件都是以彈框形式出來,所以我把動態創建的步驟放到了,彈框組件里。

    創建Dialog.ts,文件,

    @Component({
     selector: 'xtn-mode-dialog',
     templateUrl: './Dialog.html',
     styleUrls: ['./Dialog.scss'],
     animations: [ // 彈框的添加一個動畫效果,由小到大顯示,關閉時候,由大小到最后不見了。
     trigger('TriggerState', [
     state('inactive', style({ transform: 'scale(0.1)' })),
     state('active', style({ transform: 'scale(1)' })),
     transition('inactive => active', animate('150ms ease-in')),
     transition('active => inactive', animate('150ms ease-out')),
     ])
     ]
    })
    export class XtnDialog implements OnInit, OnDestroy, OnChanges, AfterContentChecked, AfterContentInit {
     // 依賴注入動態創建組件的工廠類
     constructor(private resolver: ComponentFactoryResolver) {
     }
     // 內容檢查,主要是判斷是打開還是關閉彈框。
     ngAfterContentChecked(): void {}
     // 銷毀操作
     ngOnDestroy(): void {}
     // 這里就是動態創建的組件地方法
     LoadComponent(self:any){}
     ngAfterContentInit(): void {}
     ....
    }

    就不把代碼張貼里了,查看全部代碼可以點擊這里展示出幾個方法吧,具體詳情可能點擊

    總結

    聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

    文檔

    Angular 4根據組件名稱動態創建出組件的方法教程

    Angular 4根據組件名稱動態創建出組件的方法教程:一、理解angular組件 組件是一種特殊的指令,使用更簡單的配置項來構建基于組件的應用程序架構,這樣他能簡單地寫app,通過類似的web Component 或者angular2的樣式。web Component 是一個規范。馬上就要成為標準。 應用組件的優點: 比普通指令配置還簡
    推薦度:
    • 熱門焦點

    最新推薦

    猜你喜歡

    熱門推薦

    專題
    Top
    主站蜘蛛池模板: 在线播放一区 | 又黄又爽免费视频 | 久久成人a毛片免费观看网站 | 亚洲欧洲中文字幕 | 欧美成人a级在线视频 | 中文字幕美日韩在线高清 | 日韩国产综合 | 精品一区二区三区在线视频 | 最新中文字幕第一页 | 欧美日韩亚洲视频 | 亚洲永久精品一区二区三区 | 国产在线视频一区二区三区 | 日本成人一区 | 国产日韩欧美视频在线观看 | 国产一级在线观看 | 国产精品不卡在线 | 成人毛片在线观看 | 久久久久久亚洲精品中文字幕 | 亚洲啪啪网址 | 国产精品v一区二区三区 | 国产精品色综合久久 | 欧美在线一区二区三区不卡 | 亚洲精彩视频在线观看 | 另类国产精品一区二区 | 亚洲一区日韩二区欧美三区 | 欧美日韩国产综合在线 | 亚洲欧美经典 | 国产日韩欧美亚洲综合首页 | 97一区二区三区四区久久 | 亚洲国产成人久久一区www妖精 | 么公的又大又深又硬想要 | 亚洲wuma | 视频国产精品 | 在线观看欧美精品 | 亚洲第一视频网站 | 亚洲午夜久久久久久久久电影网 | 热久久91 | 一本久道久久综合 | 在线免费视频国产 | 国产伦精品一区二区三区免费下载 | 国产一区二区不卡免费观在线 |