Angular自定义按钮降级适配AngularJS时出现嵌套重复按钮问题

这是Angular/AngularJS混合应用中典型的双重编译问题，触发逻辑如下：

• 你将cb-button同时注册为了Angular组件，又通过降级逻辑注册为了AngularJS全局指令，两个框架都能识别<cb-button>标签
• 当组件在AngularJS管理的视图区域使用时，首先AngularJS匹配到降级指令，先实例化一次组件，渲染出外层的按钮结构
• 降级组件默认会将<ng-content>对应的投影内容交给AngularJS做二次编译，二次编译时又识别到cb-button的Angular组件声明，再次渲染出一层按钮结构，最终形成嵌套
• 删除<ng-content>后没有可被二次编译的内容，移除降级装饰器后AngularJS侧没有对应指令，两种操作都能打破双重编译逻辑，因此问题消失。

可根据项目场景选择以下任意一种方案：

• 方案1：禁止AngularJS编译降级组件的内部内容，修改降级逻辑中的downgradeComponent配置，增加compileChildren: false参数，内部内容交给Angular原生处理即可：

function cbDowngradeComponent(ngJsSelector: string, componentClass: ClassCtor): void {
    DOWNGRADE_MODULE
        .directive(
            ngJsSelector,
            downgradeComponent({ 
                component: componentClass,
                compileChildren: false 
            })
        );
}

• 方案2：拆分双端组件选择器，如果需要同时在Angular和AngularJS侧使用该组件，给降级的AngularJS指令单独设置和Angular侧不同的选择器，避免两个框架同时匹配同一个标签。
• 方案3：如果项目已经不需要在AngularJS侧使用该组件，直接移除@CbDowngrades装饰器中的cb-button降级配置即可。

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