Надеюсь, это поможет!

у получить 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);
  }

}
 BeetleJuice10 нояб. 2017 г., 18:20
просто чтобы уточнить: вы хотите, чтобы HTML, предоставленный родительским компонентом, использовался в качестве шаблона дочернего компонента?
 Sibiraj10 нояб. 2017 г., 18:32
Нет, точно не может быть пустой оболочки. Но может быть. Если эта проблема решена. Его можно использовать по-разному, как даже пустая оболочка. Может иметь пользовательские шаблоны и т. Д. @BeetleJuice
 BeetleJuice10 нояб. 2017 г., 18:29
Таким образом, сам компонент является пустой оболочкой, пока шаблон не будет предоставлен извне
 Aravind10 нояб. 2017 г., 18:32
Вы хотите отправить содержимое HTML в качестве входных данных из другого компонента и привязать к шаблону? верный?
 Sibiraj10 нояб. 2017 г., 18:24
да .. мы можем получить шаблон, если внутри компонента (используя viewChild). но как это сделать, когда шаблон не является частью компонента @BeetleJuice

Ответы на вопрос(2)

опрос. В итоге я заглянул в ng-bootstrap, чтобы увидеть, как они это сделали, и в конечном итоге это довольно простое решение.

Вам нужно получить ViewContainerRef, в который вы хотите вставить строку / TemplateRef. Это может быть либо элемент хоста (ViewContainerRef, внедренный в конструктор), либо ViewChild. например:

constructor(private viewContainerRef: ViewContainerRef) { }

или же

@ViewChild('someDiv', {read: ViewContainerRef}) viewContainerRef: ViewContainerRef;

затем, в ngOnInit () вам нужно выполнить if / else в зависимости от того, является ли input шаблоном TemplateRef или строкой, и назначить его для viewContainerRef:

if (this.template instanceof TemplateRef) {
   this.viewContainerRef.createEmbeddedView(<TemplateRef<any>>this.template);
} else {
    this.viewContainerRef.element.nativeElement.innerHTML = 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>

Live демо

Если у вашего класса действительно есть шаблон, но вы хотите внедрить html только в часть этого шаблона,узнать о включении

 Sibiraj10 нояб. 2017 г., 20:17
Благодарю. но это дает шаблон элемента узла, но я хочу от нг-шаблона
 Johan Aspeling06 февр. 2019 г., 14:04
Ссылка мертва
 Sibiraj10 нояб. 2017 г., 20:26
Так ты имеешь в виду просто обычную строку?
 BeetleJuice11 нояб. 2017 г., 19:46
@SibiRaj Да: независимо от того, какую HTML-строку вы бы написали в шаблоне, она хранится в виде простой строки в свойстве класса.
 BeetleJuice10 нояб. 2017 г., 20:19
Понимаю. Почему бы не сохранить шаблон как строковое свойство родительского компонента? Почему вы требуете, чтобы он был внутри ng-шаблона в родительском представлении?

Ваш ответ на вопрос