如何使用控制檯devtools更新角度4+表單值？

Question

我想用控制檯（devtools）填充一個Angular 4+窗體。

這是我現在在做什麼：

function fillForm(){ 
    let el = document.querySelector('input[ng-reflect-name="my_input"]'); 
    let elProbe = ng.probe(el); 
    elProbe._debugContext.component.value = 'new-value'; 
} 

一些引用我想使用（如果它可以幫助任何人）：

• https://juristr.com/blog/2016/02/debugging-angular2-console/
• Trigger Angular change detection from console

Answer 1

有兩種選擇。第一個是使用綁定到表單的組件屬性，它需要手動更改檢測觸發。第二個是使用與輸入相關的表單控件，並且不需要手動更改檢測。

兩者都不是更好。

對於第一個選項，請參閱@ yurzui的答案。下面是第二個選擇答案 - 直接更新表單控件，而無需改變檢測：

function fillForm(){ 
    let el = document.querySelector('input[ng-reflect-name="my_input"]'); 
    let elProbe = ng.probe(el); 

    const NgControlClassReference = elProbe.providerTokens.find((p)=>{ 
     return p.name === 'NgControl'; 
    }); 

    let directive = elProbe.injector.get(NgControlClassReference); 
    let control = directive.control; 

    control.setValue('some'); 
} 

在這種情況下，你不需要改變檢測，因爲當你在控制調用setValue它直接通知valueAccessor有關變化：

FormControl.prototype.setValue = function (value, options) { 
    ... 
    this._onChange.forEach(function (changeFn) { 
     return changeFn(_this._value, options.emitViewToModelChange !== false); }); 

其中changeFn處於setUpContorl功能添加訂戶：

control.registerOnChange((newValue: any, emitModelEvent: boolean) => { 
    // control -> view 
    dir.valueAccessor !.writeValue(newValue); 

直接調用存取writeValue，它反過來並將值寫入輸入：

export class DefaultValueAccessor implements ControlValueAccessor { 
    ... 

    writeValue(value: any): void { 
    const normalizedValue = value == null ? '' : value; 
    this._renderer.setElementProperty(this._elementRef.nativeElement, 'value', normalizedValue); 
    } 

您也可能會發現這篇文章有用

Everything you need to know about debugging Angular applications

Answer 2

這樣做的簡單方法能使用核心令牌運行更改檢測週期ApplicationRef

let el = document.querySelector('input[ng-reflect-name="my_input"]'); 
let elProbe = ng.probe(el); 
elProbe._debugContext.component.value = 'new-value'; 
elProbe.injector.get(ng.coreTokens.ApplicationRef).tick() 

您還可以看看集成測試

https://github.com/angular/angular/blob/master/packages/forms/test/template_integration_spec.ts#L28-L30

我覺得這種方式，我們檢查我們的組件如何與NgModel不直接調用API的內部NgModel指令。

如果不調用變化檢測，我們也可以將下面的代碼來模擬用戶操作

let valueAccessor = elProbe.injector.get(elProbe.providerTokens 
         .find(x =>x.name === 'DefaultValueAccessor')); 

el.value = 'some'; 
valueAccessor.onChange('some'); 

但它看起來很奇怪