Angular2 - Получить компонент HTML, прежде чем шаблон

Question

У меня есть 2 компоненты А и B определены следующим образом:

Компонент A:

import { Component, CORE_DIRECTIVES, ElementRef} from 'angular2/angular2'; 
import ComponentB from ".'ComponentB"; 

@Component({ 
    selector: 'component-a', 
    directives: [ CORE_DIRECTIVES ], 
    template: ` 
     <component-b> 
      Inner text/html, whatever... 
     </component-b> 
    ` 
}) 

export class ComponentA({ 
    static parameters = [ [ ElementRef ] ]; 
    element:ElementRef; 
    constructor(element:ElementRef) { 
     this.element = element; 
    } 

    afterViewInit():void { 
    } 
}) 

Компонент B:

import { Component, CORE_DIRECTIVES, ElementRef} from 'angular2/angular2'; 

@Component({ 
    selector: 'component-b', 
    directives: [ CORE_DIRECTIVES ], 
    template: ` 
     <h1>{{innerContent}}</h1> 
    ` 
}) 

export class ComponentB({ 
    static parameters = [ [ ElementRef ] ]; 
    element:ElementRef; 
    innerContent:string; 

    constructor(element:ElementRef) { 
     this.element = element; 
    } 

    afterViewInit():void { 
    } 
}) 

Что Я хочу сделать это, чтобы использовать контент между тегом <component-b> в шаблоне Component A для установки переменная innerContent компонента ComponentB.

Я попытался использовать this.element.nativeElement.innerHTML внутри класса afterViewInit класса ComponentB, но он получает innerHTML переменной шаблона, а не родительской.

Ограничения: Использование пользовательских атрибутов в компоненте с помощью @ Входы/@ Выходы не является вариантом. , например.

<component-b [innerContent]="Inner text/html, whatever..."> 
    </component-b> 

Answer 1

В шаблоне ComponentB, поставить это:

template: ` 
    <h1><ng-content></ng-content></h1> 
`