使用变量值创建指令

Question

我有以下组件：

import { Component } from '@angular/core';

@Component({
    selector: 'appControlPanel',
    templateUrl: './control-panel.component.html',
    styleUrls: ['./control-panel.component.css'],
    template: `<ng-container *ngFor="let selector of Directives.selectors">
                    <{{selector.type}} [attributes]="{{selector.attributes}}">
                <ng-container>`
})
export class ControlPanelComponent {
    private Directives;
    constructor() {
        this.Directives = [{
            selectors: [{
                type: 'appDirective1',
                attributes: {
                    'key': 1
                    'connection': false
                }
            },{
                type: 'appDirective2',
                attributes: {
                    'key': 2
                    'connection': true
                }
            }]
        }, {
            selectors: [{
                type: 'appDirective3',
                attributes: {
                    'key': 4
                    'connection': false
                }
            },{
                type: 'appDirective4',
                attributes: {
                    'key': 2
                    'connection': false
                }
            },{
                type: 'appDirective5',
                attributes: {
                    'key': 1
                    'connection': true
                }

            }]
        }];
    }
}

我想创建以下指令（appDirective1，appDirective2，...，appDirective5）。为了创建它们，我创建了一个属性，它包含了将要传递的所有指令名称和属性。

但是我很难弄清楚如何使用变量创建这些指令，如果这是可能的或良好的做法。任何投入都会得到赞赏！