Angular的表單組件

建立表單元素

在上一節中，咱們學習瞭如何建立一個組件login，如今將login改造一下，

在template中添加html表單元素，#usernameRef表示input元素id，若是想傳遞input的值，使用usernameRef.value

(click)表示要處理的button的click事件，onClick(usernameRef.value,passwordRef.value)爲出發的事件，以及傳遞的參數

 

這裏的操做就是在瀏覽器控制檯打印一下用戶名和密碼

 

保存，運行應用，如圖

打開瀏覽器：http://localhost:4200/

打開瀏覽器開發者模式，輸入：LUCAS，123

 

能夠看到，控制檯輸出了咱們表單填寫的值。

 

創建服務

首先在src的app中新建一個core文件夾（src/app/core）

命令行輸入：ng g s core/auth

s是service的縮寫

 生成文件

爲service添加一個方法

能夠注意到，參數和返回值都指定了類型，調用這個方法時給的類型不對了，IDE會直接報錯，這就是TypeScript帶來的好處

 

 依賴注入

你能夠在component中import這個服務，而後實例化使用，可是這樣很差，是一個緊耦合模式，應用依賴注入（Dependency Injection）能夠實現鬆耦合。

直接使用構造好的實例，實例化的工做交給依賴注入。（可是依舊有import）

 

運行應用：

命令行輸入：ng server

瀏覽器：http://localhost:4200/

文本框：lucas

點擊Login

能夠看見服務返回了正確的值。

 

能夠去掉import嗎？

能夠的

在app.module.ts中也有providers，能夠在這裏配置

 

而後login.component.ts就能夠去掉頭部的import，以及providers

添加修飾符@Inject，他的做用到系統配置中找到名爲auth的那個依賴注入到修飾的變量中

 

 

依賴注入不單單是爲service服務的，任何類均可以經過這種方式實現解耦，他經過providers提供，經過constructor注入