按照官網 實現乙個英雄編輯器

2021-08-30 15:29:09 字數 1457 閱讀 6696

先建立乙個新的工作空間 angular-tour-of-heroes

啟動這個應用

angular 元件

修改標題

插值繫結 } ,將元件的title 屬性繫結到該html 元素中。

新增應用樣式

為了讓應用保持一種一致的外觀,angular cli 會生成乙個空的 style.css ,可以將全應用級別的樣式放進去。如下。即可改變殼的樣式。

h1 

h2, h3

body

body, input[text], button

*

接下來,英雄編輯器建立英雄列表元件使用 angular cli 建立乙個英雄的新元件名叫heroes

heroes.component 的類檔案heroes.component.ts 如下:

import  from '@angular/core';

@component()

export class heroescomponent implements oninit

ngoninit()

}

其中,第一行,從angular 核心庫中匯入了 component 和 oninit。接著為元件裝上了@component 裝飾器。

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

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

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

- templateurl    元件模板檔案的位置

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

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

新增 hero 屬性

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

heroes.component.ts 檔案

顯示英雄

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

顯示heroscomponent 檢視

出現了一些問題,佔坑,解決了補上。。。。

實現乙個簡單的行編輯器

1.要求 2.開啟 關閉回顯和緩衝 3.顯示大小寫字母和數字 4.實現退格鍵 5.實現游標左右移動 6.實現del鍵刪除整行 7.總 但是行編輯器不能讓每個字元都輸出在螢幕上,有些鍵是要作為功能鍵來使用的,所以必須關閉回顯設定,讓我們自己來設計有選擇的輸出字元。二是在linux命令列的預設模式下,輸...

實現乙個簡單的行編輯器(優化)

1.前言 2.使用方向鍵來實現游標左右移動 3.按兩下esc鍵退出程式 4.移動游標到行首 5.移動游標到行尾 6.總 之前已經寫過一篇文章了 實現乙個簡單的行編輯器 實現的功能有 1.按下大小寫字母或者數字的時候,顯示在螢幕上 2.可以使用退格鍵來刪除前乙個字元 3.可以使用del鍵來刪除一行 4...

vscode你最後乙個編輯器 vscode編輯器

主命令 ctrl shift p ctrl p 跳轉到檔名 ctrl p 列出所有可執行操作 ctrl p 跳轉到行數 ctrl g ctrl p 進入ctrl shift p 模式 ctrl p模式下 列出當前可執行的動作 顯示 errors或 warnings,也可以 ctrl shift m ...