网站搜索

javascript - 覆盖或选择退出 Angular 2 指令/组件的编译


该问题考虑了任何需要在应用范围条件下编译组件的环境(依赖平台的构建)。因此,解决方案可以借鉴 Angular 2 测试中的模拟技术,但应应用于生产环境(包括 AoT)。

鉴于我们已有一个现有的客户端浏览器应用程序,我们可能希望在其他平台上禁用某些组件的编译或完全覆盖这些组件(Angular Universal 服务器端渲染或移动应用程序)。

某些指令和组件不应在其他平台上编译,因为它们是不希望的。例如

  <client-side-only>fallback HTML contents</client-side-only>

在应用程序初始化后应保持不变。

有必要涵盖两种情况:

  • 防止指令/组件编译
  • 使用具有相同选择器的替代品或存根覆盖指令/组件

在 AngularJS 中,这就像有条件地向应用添加指令并在需要的地方使用它一样简单:

.directive('clientSideOnly', () => ({ terminal: true, priority: 10000 }));

或者使用装饰器修改已定义组件/指令的行为:

.decorator('clientSideOnlyComponentDirective', ($delegate) => ...));

在 Angular 2 中有这些 Angular 1.x 技巧的对应方法吗?

在 Angular 2 中,如何以最少的重复代码覆盖或防止指令和组件的编译?