微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

我正在开发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 – w / 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()从他们的结束发生,但是当我尝试访问importedProperty时,我得到了未定义(或者如果我初始化则为空对象)它在我的范围之前)

解决方法

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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。

相关推荐