带属性选择器的组件导致子元素不渲染

Question

我创建了一个带有属性选择器的组件。当我使用这个属性时，原始元素的子元素不会被渲染。这是正常的吗？我希望原始子组件和应用组件都被渲染，因为我不能在 svg 中做其他事情，这是我目前关心的。有一个plnkr http://plnkr.co/edit/DVdhCv8HDFoZAWO1syHD?p=preview

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

@Component({
  selector: '[attr-component]',
  template: '<div style="width:50px; height:50px; background-color:red">    </div>'
})
export class AttrComponent {
}

@Component({
  selector: 'local-component',
  template: `
<div attr-component>
    <div style="width:50px; height:50px; background-color:green"></div>
</div>
`
})
export class LocalComponent {
}

@Component({
  selector: 'app-root',
  template: '<div><local-component></local-component></div>'
})
export class AppComponent {
}

Answer 1

您需要添加

<ng-content></ng-content>

在要渲染的子组件的父组件中

Plunker example

带属性选择器的组件导致子元素不渲染

Component with attribute selector causes child elements not to render

attributes

components

selector

angularjs

angular