干货 | 基于Angular开发语言下 Iframe 父子页面交互

function childMethod(){

   var number=    $(‘#number’).value();

   if(number==” || number.length>10){

   alert(‘号码范围为1-10位数字’);

   }

 }

index.html中实现childMethod

function childMethod(){

var controllerScope = $(‘html[ng-controller=”MainCtrl”]’).scope(); 

controllerScope.check();

}

//相应的controller实现一个check方法，并声明为rootscope方法就行了

app.controller(‘MainCtrl’, function($scope, $rootScope) {

});

app.controller(‘ChildCtrl’, function($scope, $rootScope) {

   $scope.number = ”;

   $rootScope.check = function() {

      if(number==” || number.length>10){

      alert(‘号码范围为1-10位数字’);

   }

});

index.html中实现childMethod

function childMethod(){

var component =  window[‘child’];

component .check();

}

组件实现check方法

export class ChildComponent implements OnInit {

    number:string;

    constructor(public changedDetector: ChangeDetectorRef, public translate: TranslateService) {

        window[‘child’] = this;

    }

    check(){

      if(number==” || number.length>10){

      alert(‘号码范围为1-10位数字’);

      this.changedDetector.markForCheck();    //解决变量修改失效问题

      this.changedDetector.detectChanges();

     }  

    }

可以看到，我们在ChildCompent的构造方法中，给window扩展了一个child属性，然后在子页面的index.html可以通过这个属性访问到该组件，是一个比较讨巧的用法；但是这样直接使用会有问题，当我们在ChildComponent 组件的check方法中操作原生的js语法时不会有问题，但是当我们需要修改某个ngModel的值时，会发现失效了，原因是我们通过 window[‘child’].check()时，浏览器没有监听到事件变化，因而没有重新渲染ChildComponent，我的理解是一般事件都是监听鼠标触发的，此时没有产生鼠标事件，自然监听不到；解决方案就是手动通知组件重新渲染，代码就是ChangeDetectorRef提供的markForCheck,detectChanges方法