使用 ES6 测试 Angular 1.x 组件不会使用 $componentController 加载绑定

Posted 2023-02-23

【中文标题】使用 ES6 测试 Angular 1.x 组件不会使用 $componentController 加载绑定

【英文标题】：Testing Angular 1.x Component using ES6 doesn't load bindings using $componentController

【发布时间】：2017-10-31 03:59:19

【问题描述】：

我有以下代码

我的组件

class PaginationController
    page = 1

    constructor() 
        console.log(this) // PaginationController page: 1
    

export const PaginationComponent = 
  templateUrl: '/components/app/views/pagination.html',
  controller: PaginationController,
  controllerAs: '$ctrl',
  bindings: 
      data: '=',
      size: '<',
  

测试

import  PaginationComponent  from '../src/components/app/pagination'

describe("Pagination Controller", () => 

    let controller

    beforeEach(() => 
        angular
          .module("Test", [])
          .component('pagination', PaginationComponent)
    )

    beforeEach(window.module("Test"))

    beforeEach(inject(($componentController) => 
        controller = $componentController('pagination', null, 
            data: [],
            size: 10
        )
    ))

    it("change page", () => 
        console.log(controller)
    )
)

我希望控制器中的contructor 上的console.log 打印PaginationController page: 1, data: [], size: 10 但我得到PaginationController page: 1，所以我认为绑定不起作用。

谁能帮我理解为什么？

【参考方案1】：

最后这项工作像这样明确地执行.contructor()：

beforeEach(inject(($componentController) => 
    controller = $componentController('pagination', null, 
        data: [],
        size: 10
    )
    controller.constructor()
))

这里的问题是 .constructor 方法被调用了两次： 第一次是在$componentController 执行时，此时绑定在构造函数方法中不可用，但如果我执行controller.constructor()，则绑定可用。所以，我仍然不明白为什么。