译：通过 Angular 指令保持关注点分离

在我们的应用程序中，假设有一个日期选择器组件。每次用户更改日期的时，都会给分析提供商发送一个事件。到目前为止，我们只使用过一次，所以这个分析接口可以放在使用它的组件中： header-1.ts。但是，现在我们想在应用程序中的其他地方重用它。我们可以将分析代码移动到一个单独的文件中，然后在需要的时候导入它。但是，这样会使我们的代码更难维护。

一种更好的方法是使用 Angular 指令。指令允许我们创建可重用的组件，这些组件可以嵌入到其他组件中。这使得我们可以将分析代码封装到一个指令中，然后在需要的时候在任何组件中使用它。

以下是如何使用 Angular 指令来实现关注点分离的步骤：

1. 创建一个新的 Angular 指令。
2. 将分析代码添加到指令中。
3. 在需要的时候在组件中使用指令。

以下是如何创建一个新的 Angular 指令的示例：

import { Directive } from '@angular/core';

@Directive({
  selector: '[appAnalytics]'
})
export class AnalyticsDirective {
  constructor() {
    console.log('Analytics directive created');
  }
}

然后，我们可以将分析代码添加到指令中：

import { Directive } from '@angular/core';

@Directive({
  selector: '[appAnalytics]'
})
export class AnalyticsDirective {
  constructor() {
    console.log('Analytics directive created');
  }

  trackEvent(eventName: string, eventData: any) {
    // Send the event to the analytics provider
  }
}

最后，我们可以像这样在组件中使用指令：

<button appAnalytics (click)="trackEvent('button-clicked', 'hello world')">
  Click me
</button>

通过使用指令，我们可以将分析代码封装到一个可重用的组件中，然后在需要的时候在任何组件中使用它。这使得我们的代码更易于维护和重用。

Angular 指令是一个非常强大的工具，可以用来创建可重用的组件。它们可以用来实现关注点分离，使我们的应用程序更具模块化、可重用和可维护性。