Angular 小學堂 - iT 邦幫忙 | augury教學
昨天的登入頁、購物車頁與結帳成功頁大家都有順利套完版嗎?!如果沒有的話沒關係,看完今天的文章再繼續努力吧!!今天一開始我們先來套結帳頁的版型,打開assets/css/裡的checkout.css檔,一樣全部複製下來之後,貼到我們專案裡的checkout.component.css裡。一樣要記得調整檔案路徑噢!!忘記怎麼修改的話可以看昨天的文章[1]複習一下。接著打開素材pages/裡的checkout-1.html,一樣只要複製中間的區塊就好:複製貼上到我們專案裡的checkout.component.html之後,就可以先來看一下畫面:耶!!套完了!!還沒啦!!這邊其實會稍微要...
昨天的登入頁、購物車頁與結帳成功頁大家都有順利套完版嗎?!
如果沒有的話沒關係,看完今天的文章再繼續努力吧!!
今天一開始我們先來套結帳頁的版型,打開 assets/css/ 裡的 checkout.css 檔,一樣全部複製下來之後,貼到我們專案裡的 checkout.component.css 裡。
一樣要記得調整檔案路徑噢!!忘記怎麼修改的話可以看昨天的文章[1]複習一下。
接著打開素材 pages/ 裡的 checkout-1.html,一樣只要複製中間的區塊就好:
複製貼上到我們專案裡的 checkout.component.html 之後,就可以先來看一下畫面:
耶!!套完了!!
還沒啦!!
這邊其實會稍微要大家跟著我處理一下,因為當初其實沒有想說要切路由,直接用狀態切換就好。
不過在寫文章的時候又想說,就多練習一些巢狀路由的設定也不錯,才把這邊切成其他路由。
所以接下來就要開始處理這部分了!!
首先先打開我們專案的 checkout.component.css 檔,然後開啟搜尋/取代的功能 (masOS 請按下 command + option + F , Windows 請按下 ctrl + H ) ,將整個檔案裡的 article 全部取代為 article /deep/ 。
像這樣:
最上面那兩個我移除是因為那兩個不需要改成 article /deep/ 。
接著再到打開 checkout.component.html ,然後剪下這個區塊裡的程式碼:
整個貼到 customer-info.component.html 裡,儲存後看一下畫面,應該就會跟剛剛一開始的時候長得一模一樣。
感謝邦友 jackson09 的留言,我才發現這段描述沒寫完全。"重新調整如下:
整個貼到 customer-info.com...