@Input上的默認值導致測驗問題-角度、抽象類

我的測驗遇到了一些問題。

就我而言，我有兩個組件：

import {Component, Input, OnInit} from '@angular/core';
import {BComponent} from '../b/b.component';

@Component({
    selector: 'a',
    templateUrl: './a.component.html',
    styleUrls: ['./a.component.scss'],
    providers: [{provide: BComponent, useExisting: AComponent}]

})
export class AComponent extends BComponent<any> implements OnInit {
    @Input() foo = true;


    ngOnInit(): void {
        super.ngOnInit();
    }

}

import {Component, Input, OnInit} from '@angular/core';
import {FormBuilder} from '@angular/forms';

@Component({
    template: '',
})
export abstract class BComponent<T> implements OnInit {

    @Input() value: T;

    constructor(
        protected formBuilder: FormBuilder
    ) {
        let a = this.formBuilder.control(null);
    }

    ngOnInit(): void {
    }
}

我的測驗是這樣的：

import {ComponentFixture, TestBed} from '@angular/core/testing';
import {AComponent} from './a.component';
import { ReactiveFormsModule} from '@angular/forms';

describe('AComponent', () => {
    let component: AComponent;
    let fixture: ComponentFixture<AComponent>;

    beforeEach(async () => {

        await TestBed.configureTestingModule({
            declarations: [AComponent],
            imports: [
                ReactiveFormsModule],
        })
            .compileComponents();
    });

    beforeEach(() => {
        fixture = TestBed.createComponent(AComponent);
        component = fixture.componentInstance;
        fixture.detectChanges();
    });

    it('should create', () => {
        expect(component).toBeTruthy();
    });
});

問題是@Input() foo = true;在AComponent. 默認值和 肯定有問題ReactiveFormsModule。

錯誤顯示：

AComponent ? should create

    TypeError: Cannot read property 'control' of undefined

      12 |         protected formBuilder: FormBuilder
      13 |     ) {
    > 14 |         let a = this.formBuilder.control(null);
         |                                  ^
      15 |
      16 |     }
      17 |

      at new BComponent (src/app/testing/brainfuck/b/b.component.ts:14:34)
      at new AComponent (src/app/testing/brainfuck/a/a.component.ts:258:5)
      at createClass (../packages/core/src/view/provider.ts:273:14)
      at createDirectiveInstance (../packages/core/src/view/provider.ts:142:7)
      at createViewNodes (../packages/core/src/view/view.ts:314:28)
      at createRootView (../packages/core/src/view/view.ts:216:3)
      at callWithDebugContext (../packages/core/src/view/services.ts:641:23)
      at Object.debugCreateRootView [as createRootView] (../packages/core/src/view/services.ts:121:10)
      at ComponentFactory_.Object.<anonymous>.ComponentFactory_.create (../packages/core/src/view/refs.ts:91:27)
      at initComponent (../packages/core/testing/src/test_bed.ts:605:28)
      at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invoke (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:407:30)
      at ProxyZoneSpec.Object.<anonymous>.ProxyZoneSpec.onInvoke (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:3765:43)
      at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invoke (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:406:56)
      at Object.onInvoke (../packages/core/src/zone/ng_zone.ts:405:29)
      at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invoke (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:406:56)
      at Zone.Object.<anonymous>.Zone.run (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:167:47)
      at NgZone.Object.<anonymous>.NgZone.run (../packages/core/src/zone/ng_zone.ts:184:50)
      at TestBedViewEngine.Object.<anonymous>.TestBedViewEngine.createComponent (../packages/core/testing/src/test_bed.ts:609:56)
      at Function.Object.<anonymous>.TestBedViewEngine.createComponent (../packages/core/testing/src/test_bed.ts:236:36)
      at src/app/testing/brainfuck/a/a.component.spec.ts:20:27
      at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invoke (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:407:30)
      at ProxyZoneSpec.Object.<anonymous>.ProxyZoneSpec.onInvoke (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:3765:43)
      at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invoke (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:406:56)
      at Zone.Object.<anonymous>.Zone.run (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:167:47)
      at Object.wrappedFunc (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:4250:34)

如果我洗掉默認值，一切正常。

角度版本是

 "@angular/core": "12.0.5",

提前致謝！

uj5u.com熱心網友回復：

當您在AComponent其上添加默認屬性值時，它會強制呼叫繼承的建構式。發生這種情況是因為在 Typescript 轉譯期間，具有初始值的類屬性被有效地移動到建構式中

你可能不應該在抽象類上有一個建構式，但至少你需要通過覆寫建構式 in 來呼叫它AComponent，將 傳遞FormBuilder為引數

constructor(
        protected formBuilder: FormBuilder
    ) {
        super(formBuilder)
    }

注意：我沒有機會對此進行測驗，但是抽象類上的建構式可能存在一些（其他）意外行為

標籤：有角的 测试 玩笑 试验台

上一篇：如何根據Selenium(PYTHON)中的父/祖先元素區分2個按鈕？

下一篇：如何使用Mockito框架模擬我的服務