从变量动态导入组件（AngularJS）

Question

我尝试根据变量加载组件但是我得到了一个＆＃34;未捕获的错误：模板解析错误＆＃34;。我该如何做这样的事情？

<app-{{ this.plugin.component }}></app-{{ this.plugin.component }}>

Answer 1

我不认为可以在模板上执行此操作，但您当然可以在控制器/组件上执行此操作，尝试执行以下操作：

var scope = $rootScope.$new();
var element = angular.element('<app' + variable + '></app' + variable + '>');
element = $compile(element)(scope);

要在模板中打印元素，您需要使用$sce：

How do you use $sce.trustAsHtml(string) to replicate ng-bind-html-unsafe in Angular 1.2+

Answer 2

必须手动将每个路径添加到“app.module”，但所有内容似乎都是通过使用子路径来操作的。希望有一种方法可以更频繁地使用带有标签的组件，但这对我现在正在做的事情有用。

{
    path: 'mypath', 
    component: MyComponent,
    children: [
      {
        path: 'childpath',
        component: ChildComponent
      }
    ]
}