Question

我正在使用Angular 2（2.0.0版本）开发一个应用程序，angular-cli（1.0.0-beta.14）。

我在https://github.com/fxmontigny/ng2-ace-editor

之后使用Angular 2指令集成了Ace编辑器

只要Ace编辑器被实例化，量角器就不能再同步了：

import { EventEmitter, Output, ElementRef, Input, Directive } from '@angular/core';
import 'brace';
import 'brace/theme/chrome';
import 'brace/mode/html';

declare var ace: any;

@Directive({
   selector: '[aceEditor]'
})
export class AceEditorDirective {
  editor: any;

  constructor(elementRef: ElementRef) {
    let el = elementRef.nativeElement;
    this.editor = ace['edit'](el); // Comment this line and Protractor works again
  }
}

Ace编辑器使用：

实例化

    try{

        // You can now use the Subscribe model without its namespace
        // as you referenced it by its namespace in a use statement.
        $subscribe = new Subscribe();

        // If you want to use a class that is not referenced in a use
        // statement then you must reference it by its full namespace.
        $otherModel = new \App\Models\Other\Namespace\OtherModel();

        $otherModel = $input['Name'];
        $otherModel = $input['Email'];
        $otherModel = $input['Telephone'];

        // save
        $otherModel->save();           

    }
    catch (\Illuminate\Database\Eloquent\ModelNotFoundException $e)
    {
        \Log::error( $e->getMessage(), $context );              
    }
    catch (Exception $e){
        \Log::error( $e->getMessage(), $context);
    }   

    return response()->json( ['status'=>'success', 'message'=>'Completed successfully'] );
}

任何暗示问题是什么？

Answer 1

好的，终于找到了问题。看起来Angular在Ace编辑器中失去了跟踪变化，因此认为总会有持续的变化。所以

window.getAngularTestability($('app-root'))
    .whenStable(funct‌ion(){
        console.log('s‌table')
    })

实例化Ace Editor时不再返回。

简单的解决方案：将Ace编辑器从区域中实例化出来：

constructor(elementRef: ElementRef, zone: NgZone) {
  let el = elementRef.nativeElement;
  zone.runOutsideAngular(() => {
    this.editor = ace['edit'](el);
  });
}

Answer 2

我遇到了与上面相同的问题，而不是在Angular之外运行ace编辑器，我宁愿在量角器中进行多次测试，这将继续从之前的测试停止的地方开始。 Ace Editor会导致浏览器无法完成同步，因此我的量角器测试会超时。

您可以按如下方式进行测试：

it('Runs Tests for components with ace edit')
  browser.ignoreSynchronization = true;
  testAngularElements();

it('Runs the rest of the test in which the ace edit is not present')
  browser.ignoreSynchronization = false;
  remainingTests();

不幸的是我还没找到替代方法。

Ace编辑器+ Angular 2 =＆gt;量角器无法同步

2 个答案: