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

Question

我以这种方式定义了 2 个组件 A 和 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> 之间的内容组件A模板中的标签设置变量innerContent组件 B.

我试过使用 this.element.nativeElement.innerHTML里面afterViewInit ComponentB 类的，但它获取模板变量的 innerHTML，而不是父变量的 innerHTML。

限制:使用@Inputs/@Outputs 在组件中使用自定义属性不是一种选择。例如

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

Answer 1

在 ComponentB 模板中，输入:

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