我以这种方式定义了 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>
最佳答案
在 ComponentB 模板中,输入:
template: `
<h1><ng-content></ng-content></h1>
`
关于html - Angular2 - 在模板之前获取组件html,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34095585/