我有一个带有默认html模板的子组件,并且我想将此组件与其他html模板一起使用(从父级传递)。我使用ngTemplateOutlet选择模板,但是使用自定义模板时不显示子属性。
@Component({
selector: 'sbase-tags',
template: '
<ng-container *ngTemplateOutlet="customTemplate?customTemplate : defaultTemplate">
</ng-container>
<ng-template #defaultTemplate>
<ul>
<li *ngFor='let item of inputList'>
{{item.name}}
</li>
</ul>
</ng-template>`
})
export class TagsComponent implements OnInit {
@Input() inputList: any[];
@Input() customTemplate: TemplateRef<any>;
constructor() {
}
ngOnInit(): void {
}
}
Parent component:
@Component({
selector: 'app-root',
template: `
<sbase-tags
[inputList]="parentItemsList"
[customTemplate]="customTagComponentTemplate"></sbase-tags>
<ng-template #customTagComponentTemplate>
<div>
<div *ngFor='let item of inputList'>
{{item.name}}
</div>
</div>
</ng-template>
`
})
export class AppComponent {
parentItemsList = [
{
name: 'Item1',
},
{
name: 'Item2',
},
];
}'
我希望在提供自定义模板时显示inputList,但未定义。 关于如何使用子组件功能和自定义html模板的任何想法吗?