Accomplish transclusion with ng-metadata

问题

I am using AngularJs 1.6 with ng-metadata to progressively migrate the AngularJS components to Angular.

I need to build a component that is able to transclude a bit of HTML and I was hoping I can use something provided by ng-metadata since it will be easier when we upgrade to Angular. Unfortunately I can't find anything in the docs about this.

An example of a AngularJS component written using ng-metadata that uses transclusion will help me get started with this.

回答1:

This is how my component decorator ended up looking.

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

回答2:

You can enable transclusion for AngularJS by adding transclude: true:

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

Documentation on regular transclusion

---

In your case, with the ng-metadata syntax, use:

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

More info about ng-metadata's transclusion

来源：https://stackoverflow.com/questions/47451706/accomplish-transclusion-with-ng-metadata