ice-static/OrderingSystem @ 23cc3eacb1a7d3d6a0c5f21c7874aab2f251a448

在 Angular 框架中，有许多特定的标签和指令用于实现各种功能。以下是一些常见的 Angular 标签、指令及其使用方法的总结：

1. 内容投影相关

Angular 提供了 <ng-content> 和其他相关工具来实现内容投影（Content Projection）。

`<ng-content>`

用于将父组件的内容投影到子组件中。

示例：

<!-- 父组件模板 -->
<app-child>
<p>这是父组件传递的内容</p>
</app-child>
  
<!-- 子组件模板 -->
<div>
<h3>子组件标题</h3>
<ng-content></ng-content> <!-- 父组件的内容会被投影到这里 -->
</div>

多插槽内容投影

通过 select 属性可以实现多插槽内容投影。

<!-- 父组件模板 -->
<app-child>
  <header class="header">头部内容</header>
  <footer class="footer">底部内容</footer>
</app-child>

<!-- 子组件模板 -->
<div>
  <ng-content select=".header"></ng-content>
  <p>主体内容</p>
  <ng-content select=".footer"></ng-content>
</div>

2. 条件渲染

Angular 提供了条件渲染指令，用于根据条件动态显示或隐藏内容。

`*ngIf`

根据布尔值条件渲染 DOM 元素。

示例：

<div *ngIf="isVisible">
这部分内容会根据 isVisible 的值显示或隐藏。
</div>

`else` 语法

可以结合 *ngIf 使用 else。

示例：

<div *ngIf="isVisible; else notVisible">
内容可见！
</div>
<ng-template #notVisible>
内容不可见！
</ng-template>

3. 循环渲染

Angular 提供了 *ngFor 指令，用于遍历数组或对象并生成 DOM 元素。

`*ngFor`

遍历数组或对象，动态生成 DOM 元素。

示例：

<ul>
<li *ngFor="let item of items; let i = index">
  {{ i + 1 }}: {{ item }}
</li>
</ul>

let i = index：获取当前索引。
let item of items：遍历数组 items。

4. 事件绑定

Angular 提供了事件绑定机制，用于监听用户交互或其他事件。

`(event)`

绑定 DOM 事件。

示例：

<button (click)="onClick()">点击我</button>

onClick() 是组件类中的方法。

`$event`

获取事件对象。
示例：
```
<input (input)="onInput($event)" />
```
- $event 包含事件的详细信息。

5. 属性绑定

Angular 提供了属性绑定机制，用于动态设置元素的属性。

`[property]`

动态绑定 HTML 属性。
示例：
```
<img [src]="imageUrl" [alt]="imageAlt" />
```
- imageUrl 和 imageAlt 是组件类中的变量。

`class` 和 `style` 绑定

动态绑定 CSS 类或样式。

示例：

<div [class.active]="isActive" [style.color]="color">
动态样式
</div>

6. 双向绑定

Angular 提供了 [(ngModel)] 实现双向数据绑定。

`[(ngModel)]`

用于表单控件的双向绑定。
示例：
```
<input [(ngModel)]="name" />
<p>你的名字是：{{ name }}</p>
```
- 修改输入框的值会同步更新 name，反之亦然。

注意：需要在模块中导入 FormsModule 才能使用 ngModel。

7. 模板引用变量

使用 # 创建模板引用变量，可以直接访问 DOM 元素或组件实例。

示例：

<input #inputRef type="text" />
<button (click)="logValue(inputRef.value)">提交</button>

inputRef 是一个引用变量，指向 <input> 元素。
inputRef.value 获取输入框的值。

8. 管道（Pipe）

Angular 提供了管道（|）来格式化数据。

常用内置管道：

date：格式化日期。
```
<p>{{ today | date:'yyyy-MM-dd' }}</p>
```
currency：格式化货币。
```
<p>{{ price | currency:'USD' }}</p>
```
json：将对象转换为 JSON 字符串。
```
<pre>{{ object | json }}</pre>
```

自定义管道：

可以创建自定义管道对数据进行处理。

@Pipe({ name: 'customPipe' })
export class CustomPipe implements PipeTransform {
  transform(value: string): string {
    return value.toUpperCase();
  }
}

<p>{{ text | customPipe }}</p>

9. 结构型指令

结构型指令会修改 DOM 的结构。

`*ngSwitch`

根据条件渲染不同的内容。

示例：

<div [ngSwitch]="status">
<p *ngSwitchCase="'active'">状态：激活</p>
<p *ngSwitchCase="'inactive'">状态：未激活</p>
<p *ngSwitchDefault>状态未知</p>
</div>

10. 路由相关

Angular 提供了强大的路由功能。

`<router-outlet>`

路由占位符，用于显示匹配的路由组件。
示例：
```
<router-outlet></router-outlet>
```

路由链接

使用 routerLink 导航到指定路由。
```
<a routerLink="/home">首页</a>
```

在 Angular 项目中，可以通过配置 tsconfig.json 文件来设置不同地方引用文件的相对路径。Angular 使用 TypeScript 进行开发，因此 TypeScript 的路径映射功能可以帮助我们简化模块导入路径。

以下是具体步骤：

1. 配置 `tsconfig.json`

在 Angular 项目的根目录下找到 tsconfig.json 文件，配置 compilerOptions 中的 paths 属性。paths 属性允许你定义路径别名，从而简化模块导入路径。

例如，假设你的项目结构如下：

src/
├── app/
│   ├── components/
│   │   └── header/
│   │       └── header.component.ts
│   ├── services/
│   │   └── auth.service.ts
│   └── app.module.ts
├── assets/
├── environments/
└── main.ts

如果你希望在代码中使用更简洁的路径（如 @app/components/header），可以在 tsconfig.json 中添加以下内容：

{
  "compilerOptions": {
    "baseUrl": "./src", // 设置基础路径为 src 目录
    "paths": {
      "@app/*": ["app/*"], // 将 @app 映射到 src/app
      "@services/*": ["app/services/*"], // 将 @services 映射到 src/app/services
      "@components/*": ["app/components/*"] // 将 @components 映射到 src/app/components
    }
  }
}

2. 在代码中使用路径别名

配置完成后，你可以在代码中使用这些路径别名来导入模块。例如：

// 导入 Header 组件
import { HeaderComponent } from '@components/header/header.component';

// 导入 AuthService
import { AuthService } from '@services/auth.service';

相比传统的相对路径（如 ../../services/auth.service），这种方式更加清晰、易于维护。

3. 确保 Webpack 或 Angular CLI 支持路径别名

Angular CLI 默认支持 tsconfig.json 中的 paths 配置，但如果你使用自定义 Webpack 配置，则需要确保 Webpack 也能识别这些路径别名。

在 Webpack 中，你可以通过 resolve.alias 来实现类似的功能。例如：

const path = require('path');

module.exports = {
  resolve: {
    alias: {
      '@app': path.resolve(__dirname, 'src/app'),
      '@services': path.resolve(__dirname, 'src/app/services'),
      '@components': path.resolve(__dirname, 'src/app/components')
    }
  }
};

如果你没有自定义 Webpack 配置，通常不需要额外操作，Angular CLI 会自动处理路径别名。

4. 检查编辑器支持

某些 IDE（如 VSCode）可能需要重新加载项目或安装相关插件才能正确解析路径别名。如果路径别名无法正常工作，请尝试以下步骤：

确保 tsconfig.json 文件保存并生效。
在 VSCode 中按下 Ctrl + Shift + P，然后选择 TypeScript: Restart TS server。
安装插件（如 Path Intellisense）以增强路径提示。

5. 测试路径别名

完成配置后，运行以下命令测试项目是否正常工作：

ng serve

如果没有报错，说明路径别名配置成功。

注意事项

路径别名只会影响 TypeScript 编译时的模块解析，不会影响浏览器中的实际路径。
如果路径别名配置不正确，可能会导致编译错误或模块无法解析的问题。
确保 baseUrl 和 paths 的配置与项目目录结构一致。

通过以上步骤，你就可以在 Angular 项目中轻松配置和使用路径别名了！

angular使用技巧.md 8.2 KB Vēsture Neapstrādāts