[英]Angular2 ComponentResolver and ng-content not rendering
我正在尝试将ComponentResolver
和ng-content
一起使用,但是,当解析器构建组件时,不会呈现已转换的内容。
我正在使用Angular2 RC3。 我知道有一些即将发生的变化可能会影响到ComponentResolver
( https://github.com/angular/angular/issues/9467 )。
import {
Input,
Component,
OnInit,
ViewContainerRef,
ComponentResolver,
ViewChild
} from '@angular/core';
/**
* COLUMN
*/
@Component({
selector: 'column-component',
template: `
<div style="border:1px solid green; padding:5px;display:block;">
<b>column: {{label}}</b>
<ng-content></ng-content>
</div>`
})
export class ColumnComponent {
@Input() label: sting = "";
}
/**
* CELL
*/
@Component({
selector: 'cell-component',
template: '<b>cell component</b> <div #target></div>'
})
export class CellComponent {
@ViewChild('target', {read: ViewContainerRef}) target;
constructor(
private componentResolver:ComponentResolver,
private viewContainerRef: ViewContainerRef) {
}
ngOnInit() {
this.componentResolver.resolveComponent(ColumnComponent).then((factory) => {
let componentRef = this.target.createComponent(factory, 0, this.viewContainerRef.injector);
});
}
}
/**
* TABLE
*/
@Component({
selector: 'datatable',
template: `
<div #target style="border:1px solid blue;padding:5px;">
<b>table component</b>
<cell-component
style="border:1px solid yellow;padding:5px;display:block">
</cell-component>
</div>
`,
directives: [ CellComponent ]
})
export class TableComponent {
}
/**
* ROOOT APP
*/
@Component({
selector: 'root-app',
template: `
<div style="border:1px solid red;padding:5px;">
<datatable>
<column-component [label]="'my label'">
column content
</column-component>
</datatable>
</div>
`,
directives: [ ColumnComponent, TableComponent ]
})
export class AppComponent {
}
当前行为:永远不会呈现作为column-component
内容的单词“列内容”。
预期行为 : column-component
的内部内容(单词“列内容”)将呈现。
UPDATE
@GünterZöchbauer回答了我的问题(谢谢!),然而,我应用了更多的逻辑,遗憾的是它没有用。 请参阅更新的plunkr: https ://plnkr.co/edit/CsbmY6wePC3AWZlBDy34 ? p = preview
预期结果:将对每一行重复单元格,并将row
的age
属性的值转换为每行。
您还需要将<ng-content>
添加到中间组件
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.