angularjs - 使用 ng-metadata 完成嵌入

Question

我正在使用 AngularJs 1.6 和 ng-metadata 逐步将 AngularJS 组件迁移到 Angular。

我需要构建一个能够嵌入一些 HTML 的组件，我希望我可以使用 ng-metadata 提供的东西，因为当我们升级到 Angular 时它会更容易。不幸的是，我在文档中找不到任何关于此的内容。

使用嵌入的 ng-metadata 编写的 AngularJS 组件示例将帮助我开始使用它。

Answer 1

这就是我的组件装饰器最终的样子。

@Component({
    selector: 'diDropdown',
    templateUrl: require('./dropdown-component.html'),
    legacy: { transclude: true},
})
export class DropdownComponent {}

Answer 2

您可以通过添加以下内容为 AngularJS 启用嵌入transclude: true：

app.component('myComponent', function() {
    transclude: true,
    controller: function() {
        // Your code
    }
})

关于常规嵌入的文档

---

在您的情况下，使用ng-metadata语法，使用：

@Component({
    selector: 'myComponent',
    templateUrl: 'my-template.html',
    legacy: {
        transclude: true
    }
})

有关 ng-metadata 嵌入的更多信息