Question

我有两个组件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 {
    }
} )

我想要完成的是使用组件A模板中<component-b>标记之间的内容来设置ComponentB的变量innerContent。

我尝试在ComponentB类的this.element.nativeElement.innerHTML内部使用afterViewInit，但是它获取模板变量的innerHTML，而不是父模型。

限制：使用@ Inputs / @ Outputs在组件中使用自定义属性不是一种选择。的 e.g。

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

Answer 1

在ComponentB模板中，输入：

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

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

1 个答案: