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

具有属性选择器的组件导致子元素不呈现

1 个答案: