ionic3+angular4開發混合app 之自訂群組件

標籤：angular4   解釋   out   接下來   更新   name   傳值   nts   png   

這裡主要是記錄ionic3+angular4開發混合app時自訂群組件，我想自訂群組件的方法和angular4應該類似，具體在純angular4中自訂群組件，暫時沒有實踐，個人覺得差別不大，之後實踐了會再次更新。

首先，在ionic3中有命令可以直接建立一個組件：ionic g component componentName

使用這個命令建立的組件會在components目錄下產生一個組件檔案夾和一個module檔案，具體目錄，請看：我這裡是有3個小工具

 

並且會把你建立的組件自動import到module裡面，你無需在在裡面匯入模組了，不過如果你需要在自訂群組件裡面請求資料的話，就需要import相應的服務了

接下來你就可以在自訂群組件模組裡面定義你的組件了

自訂群組件要掌握的知識點主要有兩點：

　　1.是父組件到子組件之間的傳值：父到子之間的傳值方式是通過屬性來傳值

　　　　子組件模組的ts檔案裡面需要使用@Input()輸入，使父模組往子模組傳遞內容

　　　　

　　　　父組件使用，通過屬性的方式傳遞

　　　　

　　　　這樣父組件到子組件就可以傳值了。

　　2.子組件到父組件之間的傳值方式：通過事件來傳遞

　　　　子組件模組ts需要使用@OutPut()輸出向父組件傳值，具體用法如：

　　　　

　　　　這裡的this.gotohome.emit(event);裡面的event就是指要傳遞給父組件的值，下面看模板檔案的點擊事件：

　　　　

　　　　這裡我給父組件傳遞了一個字串“123”，這裡只是舉個例子，實際，我在在這個組件中沒有用到這個值，你們可以舉一反三，根據你們的需求來傳相應的值

　　　　下面看父組件接收到的值對不對？

　　　　

　　　　這裡注意一下，接收值，一定要加上$這個符號才能接收到

　　　　

　　　　我這邊列印出來，確實接收到了子組件傳給父組件的字串“123”，實際怎麼使用看實際的需求了

　　　　到這裡，子組件傳值給父組件就結束了

如果跟著以上方法實踐的同學肯定有疑問了，會一直報錯對不對，那就是我接下來要說的事情了，其實很簡單，你要用你自己定義的組件，是不是得先匯入，有這個東西才能使用吧

接下來就匯入自訂的組件：我們一開始給自訂的組件建了一個module，叫做componentsModule

你要使用的時候需要將這個componentsModule匯入到相應的module裡面去，不然會報錯說沒有這個組件

用來解釋會不會更明了一些呢？

如果一些小模組沒有自己獨立的module，它本身就是依賴於appModule的話，要使用自訂群組件，則需要在appModule裡面匯入componentsModule即可

我要記錄的自定組件內容就這麼多了，以後接觸到更深的層次再更新了~

哪裡有寫錯的地方還望各位大牛指點指點~

謝謝！

ionic3+angular4開發混合app 之自訂群組件