Angular混合开发：如何升级Angular 1.x属性指令至Angular 5？

当然可行！既然你已经在用@angular/upgrade/static里的UpgradeModule搞定了组件和服务的升级降级，那这种属性指令的升级也可以用类似思路，只是有一些针对指令的细节要注意，我给你一步步拆解：

1. 先准备好你的Angular 1.x属性指令 #

假设你原来的指令是这样的（核心是restrict: 'A'）：

angular.module('myLegacyApp')
  .directive('legacyHighlight', function() {
    return {
      restrict: 'A',
      link: function(scope, element, attrs) {
        // 指令逻辑：监听鼠标悬停切换高亮样式
        element.on('mouseenter', () => element.addClass('highlighted'));
        element.on('mouseleave', () => element.removeClass('highlighted'));
      }
    };
  });

2. 在Angular 5中创建“包装指令” #

我们需要用Angular升级模块里的UpgradeDirective来包装旧指令，让它能在Angular 5环境中运行：

首先，在你的Angular 5模块里导入必要的依赖，并启动Angular 1模块：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { UpgradeModule, UpgradeDirective } from '@angular/upgrade/static';

// 导入你的Angular 1.x模块
import { myLegacyApp } from './legacy-app';

@NgModule({
  imports: [
    BrowserModule,
    UpgradeModule
  ],
  declarations: [
    // 声明我们的包装指令
    UpgradedHighlightDirective
  ]
})
export class AppModule {
  constructor(private upgrade: UpgradeModule) {}

  ngDoBootstrap() {
    // 启动Angular 1.x模块
    this.upgrade.bootstrap(document.body, [myLegacyApp.name], { strictDi: true });
  }
}

然后创建包装指令本身：

import { Directive, ElementRef, Injector } from '@angular/core';
import { UpgradeDirective } from '@angular/upgrade/static';

@Directive({
  selector: '[legacyHighlight]' // 选择器要和Angular 1指令的属性名完全一致
})
export class UpgradedHighlightDirective extends UpgradeDirective {
  constructor(elementRef: ElementRef, injector: Injector) {
    // 第二个参数传入Angular 1指令的注册名称
    super('legacyHighlight', elementRef, injector);
  }
}

3. 在Angular 5模板中使用升级后的指令 #

现在你可以像用普通Angular指令一样在模板里用它了：

<div legacyHighlight>鼠标悬停我试试！</div>

处理带绑定的属性指令 #

如果你的旧指令有隔离作用域和数据绑定（比如@、=、&），只需要在包装指令里对应添加输入输出即可：

比如旧指令是这样的：

angular.module('myLegacyApp')
  .directive('legacyGreeting', function() {
    return {
      restrict: 'A',
      scope: {
        userName: '@'
      },
      link: function(scope, element) {
        element.text(`Hello, ${scope.userName}!`);
      }
    };
  });

那包装指令要加上inputs配置：

@Directive({
  selector: '[legacyGreeting]',
  inputs: ['userName'] // 和旧指令的作用域属性名对应
})
export class UpgradedGreetingDirective extends UpgradeDirective {
  constructor(elementRef: ElementRef, injector: Injector) {
    super('legacyGreeting', elementRef, injector);
  }
}

使用时：

<div legacyGreeting userName="Erik"></div>

一些注意事项 #

• UpgradeDirective会自动处理新旧框架的生命周期映射，确保旧指令的link函数在合适的时机执行，不用你手动调整。
• 如果你的旧指令依赖了Angular 1的服务，只要这些服务已经被升级或者能通过注入器访问到，就会正常工作——和你升级组件时的依赖处理逻辑一致。

内容的提问来源于stack exchange，提问作者Erik Nijland