面试题：Angular中如何使用指令实现动态数据加载时的元素样式绑定

1. 创建自定义指令

指令基本结构：在Angular中，指令是一个带有 @Directive() 装饰器的类。它通常包含一个选择器（用于在模板中标识指令）、一个或多个输入属性（用于从组件传递数据到指令），以及可能的生命周期钩子函数。
用到的装饰器：
- @Directive：用于标识一个类为指令，并定义指令的选择器等元数据。
- @Input：用于定义指令的输入属性，使外部组件可以向指令传递数据。

下面是一个简单的自定义指令示例，用于根据用户状态改变背景颜色：

import { Directive, ElementRef, Input, Renderer2 } from '@angular/core';

@Directive({
  selector: '[appUserStatusColor]'
})
export class UserStatusColorDirective {
  constructor(private el: ElementRef, private renderer: Renderer2) {}

  @Input() userStatus: string;

  ngOnInit() {
    this.setColor();
  }

  setColor() {
    if (this.userStatus === 'active') {
      this.renderer.setStyle(this.el.nativeElement, 'background-color', 'lightgreen');
    } else if (this.userStatus === 'inactive') {
      this.renderer.setStyle(this.el.nativeElement, 'background-color', 'lightcoral');
    }
  }
}

2. 在组件模板中使用指令

假设我们有一个组件，用于显示用户列表，并且已经从服务器获取了用户数据。我们可以在组件模板中这样使用上述指令：

<ul>
  <li *ngFor="let user of userList" appUserStatusColor [userStatus]="user.status">
    {{ user.name }}
  </li>
</ul>

在上述模板中，appUserStatusColor 是我们自定义指令的选择器，[userStatus]="user.status" 将每个用户的状态传递给指令。

3. HTTP请求获取数据后与指令配合显示正确样式

发起HTTP请求：在组件中，使用 HttpClient 模块来发起HTTP请求获取用户列表数据。

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-user-list',
  templateUrl: './user-list.component.html',
  styleUrls: ['./user-list.component.css']
})
export class UserListComponent implements OnInit {
  userList: any[] = [];

  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.http.get<any[]>('your-api-url').subscribe(data => {
      this.userList = data;
    });
  }
}

与指令配合：当数据获取成功并赋值给 userList 后，*ngFor 指令会遍历用户列表，并为每个列表项应用 appUserStatusColor 自定义指令。由于指令依赖的 userStatus 输入属性从用户对象中获取，所以会根据每个用户的实际状态动态改变列表项的背景颜色。

星途面试题库

面试题：Angular中如何使用指令实现动态数据加载时的元素样式绑定

知识考点

面试题答案

1. 创建自定义指令

2. 在组件模板中使用指令

3. HTTP请求获取数据后与指令配合显示正确样式