Компонент с селектором атрибутов приводит к тому, что дочерние элементы не отображаются

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