Question

我有以下代码

我的组件

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)
    })
})

我希望控制器中构造函数的console.log打印PaginationController {page: 1, data: [], size: 10}，但我得到PaginationController {page: 1}，所以我假设绑定不起作用。

任何人都可以帮我理解原因吗？

Answer 1

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

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

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

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

1 个答案: