Angular快速上手 為應用外殼建立元件05

2021-08-25 05:36:31 字數 1158 閱讀 5597

0、前言

使用 angular cli 建立乙個名為heroes的新元件,首先我們要知道在什麼專案之下建立元件。 

你要從 angular 核心庫中匯入component符號,並為元件類加上@component裝飾器。

@component是個裝飾器函式,用於為該元件指定 angular 所需的元資料。

cli 自動生成了三個元資料屬性:

selector— 元件的選擇器(css 元素選擇器)

templateurl— 元件模板檔案的位置。

styleurls— 元件私有 css 樣式表檔案的位置。

css 元素選擇器

ngoninit是乙個生命週期鉤子,angular 在建立完元件後很快就會呼叫ngoninit。這裡是放置初始化邏輯的好地方。

heroescomponent中新增乙個hero屬性,用來表示乙個名叫 「windstorm」 的英雄。

在heroes.component.ts中新增以下**:

hero = 'windstorm'
開啟模板檔案heroes.component.html。刪除 angular cli 自動生成的預設內容,改為到hero屬性的資料繫結。

在heroes.component.html檔案中寫入以下**:

}
如果 cli 的ng serve命令仍在執行,瀏覽器就會自動重新整理,並且同時顯示出應用的標題和英雄的名字。

Angular7上手體驗

檢視當前你的node版本可以在cmd中輸入 開發工具強烈推薦 用cli命令建立 ng7demo 這裡前面我用ng7 demo的時候報錯 應該是不能用下劃線 這裡誇獎下,7加入了cli prompts 建立的時候可以選是否啟用router 及 css用scss,sass等 暫時只有這2個prompts...

ibatis 快速上手

簡介 例子 現在我們我們通過乙個簡單的案例,了解如何通過ibatis解決資料訪問問題。現在有有乙個資料庫,資料庫裡面有一張人員資訊表 需求是這樣 通過乙個web應用程式顯示人員資訊表裡面的資訊,並且可以新增 修改 刪除人員記錄 乙個並不複雜的案例,但是它覆蓋所有開發首先要學習的內容。第1步 the ...

Pro C快速上手

條件 winxp vc 6 裝在c program files microsoft visual studio vc98 oracle 9 裝在e oracle ora90 步驟 1 dos視窗設定環境變數,預編譯 oralce 給的關於pro c 例子 2 設定vc 環境 3 編譯執行 c程式。具...