Angular2 - 在模板之前获取组件html

Question

I have 2 components A and B defined this way:

Component 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 {
    }
} )

Component 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 {
    }
} )

What i want to accomplish is to use the content between the <component-b> tag in Component A template to set the variable innerContent of ComponentB.

I have tried to use this.element.nativeElement.innerHTML inside afterViewInit of ComponentB class, but it gets the innerHTML of the template variable, not of the parent one.

Restrictions: Use of custom attributes in the component using @Inputs/@Outputs is not an option. eg

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

Answer 1

In ComponentB template, put this:

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