Question

我正在尝试学习如何在我的angular4应用程序中使用模板参考，到目前为止，我似乎理解的文档，我们可以使用templateRef中的视图，但当我尝试实现相同的时候，我得到了跟随错误

错误错误：没有TemplateRef的提供者！

以下是我的代码示例

import { Component, OnInit, EventEmitter, ViewChild, TemplateRef, ElementRef } from '@angular/core';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  constructor(private template: TemplateRef<any>, private element: ElementRef) { }
  ngOnInit() {
    this.template.createEmbeddedView(this.element);
  }
}

<ng-template>
    <div style='border: solid 2px yellow;
    width: 100%;
    height: 50px;
    background-color: #adadad;'>

    </div>
</ng-template>
<div style='border: solid 2px red;
    width: 100%;
    height: 180px;
    background-color: #adadad;'>

</div>

这里我要实现的是将html存在于组件内部。

更新1

我已将代码更改为此

@ViewChild('tmp1') template: TemplateRef<any>;
  constructor(private element: ElementRef) { }
  ngOnInit() {
       this.template.createEmbeddedView(this.element.nativeElement);
  }


<ng-template #tmp1>
    <div style='border: solid 2px yellow;
    width: 100%;
    height: 50px;
    background-color: #adadad;'>

    </div>
</ng-template>
<div style='border: solid 2px red;
    width: 100%;
    height: 180px;
    background-color: #adadad;'>

</div>

但我仍然无法在模板中插入元素

Answer 1

由于您指定了templateURL和styleURL，看起来您使用的是Angular 5，而不是Angular 4.在这种情况下，您希望将template / html放在模板中指定的模板文件中。即app.component.html

错误：没有TemplateRef的提供者！ Angular4

1 个答案: