Я хочу получить innerHTML ng-template для своего компонента. Что-то типа
HTML
<my-comp [template]="myTemplate"></my-comp>
<ng-template #myTemplate></ng-template>
TS
export class MyComponent implements OnInit {
@Input() template: string | TemplateRef<any>;
ngOnInit(){
console.log(this.template);
}
}
Поскольку вам требуется только оболочка, в которую будет внедрен шаблон, рассмотрите возможность использования директивы вместо компонента.
@Directive({
selector: '[template-host]'
})
export class HostDirective{
@Input('template-host') set templateHtml(value){
this.hostElement.innerHTML = value;
}
private hostElement:HTMLElement;
constructor(elementRef:ElementRef){
this.hostElement = elementRef.nativeElement;
}
}
Теперь вы можете применить эту директиву к любому элементу, и предоставленная привязка template-host вызовет внедрение html в этот элемент. Например:
<!-- The div will contain the html in myTemplate -->
<div [template-host]="myTemplate"></div>
Если у вашего класса действительно есть шаблон, но вы хотите внедрить html только в часть этого шаблона, узнать о включении
ngTemplateOutletContext?
- person Jeremy; 12.04.2021
Сегодня мне нужно было решить точно такую же проблему, и я нашел этот вопрос. В итоге я изучил ng-bootstrap, чтобы посмотреть, как они это сделали, и в конечном итоге это довольно простое решение.
Вам нужно получить ViewContainerRef, в который вы хотите вставить строку/TemplateRef. Это может быть либо хост-элемент (ViewContainerRef, внедренный в конструктор), либо ViewChild. например:
constructor(private viewContainerRef: ViewContainerRef) { }
or
@ViewChild('someDiv', {read: ViewContainerRef}) viewContainerRef: ViewContainerRef;
затем в ngOnInit() вам нужно сделать if/else в зависимости от того, является ли ввод TemplateRef или строкой, и назначить его для viewContainerRef:
if (this.template instanceof TemplateRef) {
this.viewContainerRef.createEmbeddedView(<TemplateRef<any>>this.template);
} else {
this.viewContainerRef.element.nativeElement.innerHTML = this.template;
}
Надеюсь, это поможет!
@Inputне может бытьTemplateRef, поэтому, если ваше требование будет разработано, я предложу вам способы реализации - person Aravind schedule 10.11.2017