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

Posted 2023-02-23

【中文标题】带有属性选择器的组件导致子元素不渲染

【英文标题】：Component with attribute selector causes child elements not to render

【发布时间】：2017-02-22 06:43:24

【问题描述】：

我创建了一个带有属性选择器的组件。当我使用这个属性时，原始元素的子元素不会被渲染。这是正常的吗？我希望渲染原始子组件和应用组件，因为我不能在 svg 中执行其他操作，这是我目前关心的问题。 有一个plnkrhttp://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 

【参考方案1】：

你需要添加

<ng-content></ng-content>

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

Plunker example

【讨论】：

非常感谢！我会在我的 svg 组件上尝试一下。

我自己还没有尝试过使用 SVG。 SVG 有一些限制。如果某些事情不起作用，请创建另一个问题。