Angular 生成动态组件

Question

I was writing Unit test cases for my angular project. In one of the component, another component is used as child component. I created mock child component. To avoid redundant code, I created a helper function which will generate a component and return so I can declare mock components in test bed. But I am not sure how can I declare Inputs and Outputs on a dynamic component.

Here is my code for dynamic component generation.

export function getMockComponent(selector: string) {
    @Component({ selector, template: '' })
    class MockComponent { }
    return MockComponent;
}

And I am expecting something like this:

export function getMockComponent(selector: string, { inputs = [], outputs = [] } = {}) {
    @Component({ selector, template: '' })
    class MockComponent { 
        for (let i = 0; i < inputs.length; i++) {
            @Input() inputs[i];
        }
    }
    return MockComponent;
}

Answer 1

In a function, you can apply class decorator by applying it directly to a class

Component({ selector, template: '' })(
    class MockComponent { 
        for (let i = 0; i < inputs.length; i++) {
            @Input() inputs[i];
        }
    })

but it might not work with AOT compilation.