使用 ng-metadata 完成嵌入答案

【问题标题】：Accomplish transclusion with ng-metadata使用 ng-metadata 完成嵌入
【发布时间】：2017-11-23 09:20:49
【问题描述】：

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

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

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

【问题讨论】：

你不能把transclude: true加到你的组件里吗？
是的，你是对的。显然这有效：legacy: { transclude: true},
很高兴听到！我已根据我的评论为这篇文章添加了答案。

标签： angularjs angular-upgrade

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

Documentation on regular transclusion

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

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

More info about ng-metadata's transclusion

【讨论】：

是的，这就是在 AngularJs 中的做法，但是我想使用 ng-metadata 语法。
更新答案。