3-3 在組件類中引用模版

引用的名字是不能重複的。



聲明成員變量，指定成員的類型是ElementRef。咱們在前面加了個@ViewChild這麼個裝飾器.
html能夠理解爲不是符合angular標準的組件庫。

實戰理解模板引用

想作輪播圖的組件。
  
新建一個組件，理解模板引用的概念。
組件分爲圖片、圖片下面的遮罩層、右下角的點，
滾動的過程當中，點還會選中的效果。

裝了Angular Files這個插件的話，就能夠快速的生成組件

右鍵文件夾的路徑，能夠在這個文件夾下生成組件。

輸入組件的名稱

新建好的組件
  
組件下建立index.ts把這個組件導出
export * from 

根目錄的index.ts再導出到上一層。
 

App.modules.ts內倒入

組件的模板

首先是有一個容器container。

容器裏面會有幾部分，首先是圖片、而後是遮罩，而後是右下角的圓點。
圖片的容器



遮罩




 裏面的小圓點用span來去作。

寫css

下面的都是相對於container的位置，由於container這個容器是相對定位。而且不容許滾動。


    


遮罩裏面有小圓點，讓它的display爲flex，小圓點總體向右，那麼justify-content爲flex-end



底下的圓點，這幾個小圓點自己又是flex

畫圓點用border-radius半徑設置爲50% ，每一個原點之間的距離爲5px

ts後端

由於滾動圖須要幾個圖片，因此咱們定義圖形的接口。caption是圖片的文字說明。


定義輸入型的屬性。silders。他是ImageSlider的數組。




前端的images就能夠循環這個silders數組。

圖片的連接地址。

alt就顯示圖片的說明

小圓點和數組的數量也是同樣的

修改成

app組件內引入silder組件

經過圖形化的界面生成的組件，在引用的時候，可能須要一些編譯過程，這個錯誤能夠不用理會。

silders是一個input的屬性。所以在調用silder這個組件的時候，能夠以屬性綁定的形式傳遞參數進來。

在app.component.ts內定義ImageSlider的接口類型的數組變量。

複製進來一些數組的對象

預覽效果

 

子組件內起別名

還須要指定static爲true。
static判斷是否在ngFor的循環裏面。若是在ngFor包含下就是false表示動態的。
沒在ngFor或者ngIf的包涵下就是true，表示靜態的

指定名稱和類型

在ngOnInit內輸出


把elementRef打印出來，。 

裏面有個屬性nativeElement就是指向這個div



拿到它咱們能幹嗎呢？既然它能夠指向html的原生節點。咱們就能夠作一些操做。例如更改這個元素的innerHTML元素





圖片被替換成了hello。這是由於咱們把它的innerHTML給換掉了。直接操做了DOM。通常是不推薦直接修改元素的DOM的。

 

結束