在 AngularJs 1.7.2 中降级的 Angular 5 组件上使用 NgRef

Question

我正在 Angular 1.7.2 中开发一个项目，该项目使用了 Angular 5/6 中内置的一些组件。我们正在使用 downgradeComponent 工具降级组件，一切正常。

我们最近添加了一个需要集成的新组件，但我们也需要访问组件属性。我正在查看 ngRef 指令，但它似乎不起作用，而且我无法在 Angular 文档之外找到任何其他 ngRef 示例。当我添加 ngRef 并将其绑定到当前范围内的变量时，它永远不会被分配。如有任何帮助，我们将不胜感激！

Angular 5分量

export class ImportedComponent implements OnInit {

    variable1: boolean = true;
    variable2: boolean = false;

    constructor(private certService: ImportedComponent) { }

    ngOnInit() {
        this.variable1 = true;
        this.variable2 = false

    }
}

Html - 带 AngularJS 1.7.2

<imported ng-ref="importedProperty" ></imported>

<custom-button ng-if="importedProperty.variable1"  [disabled]="!importedProperty.variable2"></custom-button>

降级

angular
  .module("blah", [])
  .directive(
    "imported",
  downgradeComponent({ component: ImportedComponent }) as angular.IDirectiveFactory
  );

导入组件的降级工作正常，因为 HTML 正在显示并且我能够看到 console.log()s 从它们的末端发生但是当我尝试访问 importedProperty，我得到未定义的（或者空对象，如果我之前在我的范围内初始化它）

Answer 1

我最终与现在将数据作为事件传回的组件所有者合作。然后我监听该事件并相应地使用这些属性

在 AngularJs 1.7.2 中降级的 Angular 5 组件上使用 NgRef

Using NgRef on downgraded Angular 5 component in AngularJs 1.7.2

angularjs

angularjs-directive

angular