angular中的常用指令、如何自定义指令

环境准备

使用ng n ngPro3 --standalone=false命令创建一个angular项目。
项目创建完成以后，文件布局如下：

项目自动生成的package.json文件的内容如下：

{
  "name": "ng-pro3",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^18.1.0",
    "@angular/common": "^18.1.0",
    "@angular/compiler": "^18.1.0",
    "@angular/core": "^18.1.0",
    "@angular/forms": "^18.1.0",
    "@angular/platform-browser": "^18.1.0",
    "@angular/platform-browser-dynamic": "^18.1.0",
    "@angular/router": "^18.1.0",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^18.1.4",
    "@angular/cli": "^18.1.4",
    "@angular/compiler-cli": "^18.1.0",
    "@types/jasmine": "~5.1.0",
    "jasmine-core": "~5.1.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.1.0",
    "typescript": "~5.5.2"
  }
}

然后到项目目录下，使用ng s -o或者npm run start命令启动项目：

下面验证下，将根组件app.component.html文件内容改为如下：

创建一个新的组件、并显示到html中

在集成终端中运行命令ng g c myc01，自动创建一个新的组件：

创建完成后：

将组件显示到html中：

最基本的if条件判断

开始显示：

点击按钮：

if-else写法

输入ngif，从提示选中ng-if-else这一项，然后回车：

自动生成了代码块：

将具体判断条件加上：

展示：

点击更改成绩的按钮：

switch语句

为了演示，在集成终端中执行ng g c myc02命令，生成另外一个组件：

在根组件app.component.html中引用app-myc02组件：

输入ngsw，有自动提示：

回车：

修改后：

初始显示：

下面是随着点击按钮的变化：

for循环指令

在集成终端中输入命令ng g c myc03创建一个新的组件：

到根组件中引用新创建的组件：

输入ngfor，从提示中选择nf-for，然后回车：

修改后：

展示效果：

带有序号的for循环

回车：

修改后：

展示效果：

自定义指令的制作

执行命令ng g c myc04创建一个新的组件：

在根组件中显示新生成的组件：

期望自定义appFoucus指令，实现自动聚焦：

自定义指令的语法：ng generate directive 指令名
简化写法：ng g d 指令名

假设自定义appFocus指令,自动获取焦点。

在集成终端中执行命令ng g d focus，注意app不用带，是系统自动加上去的：

自动生成的focus.directive.ts文件中的内容：

修改后：

刷新页面，控制台可以看到打印的对象（如果看不到，就重启服务器）：

将对象展开：

将鼠标放到input上，上面的输入框会高亮：

修改自定义指令文件，实现自动获取焦点：

页面展示，第二个输入框自动获取了焦点：

现在想再自定义一个指令appUpper，自动输入框中的文字变为大写：

在集成终端中执行命令ng g d upper，来自动生成一个自定义指令：

自动生成的自定义指令的文件的内容：

加上变大写的逻辑：

现在查看效果，第三个输入框的的字母自动转换为大写了：