Angular ngTemplateOutlet上下文渲染角度templateRef

时间:2018-11-20 15:30:34

标签: angular templates

我正在尝试将上下文作为角度成分注入ngTemplateOutlet中。

预期<div class="WRAPPER"><input [(ngModel)]="firstName" type="text" ></div>

实际<div class="WRAPPER">[object Object]</div>

ngTemplateOutlet context是否可能与模板引用绑定? https://stackblitz.com/edit/angular-chayhd?file=src%2Fapp%2Fapp.component.ts

@Component({
  selector: 'my-app',
  template: `
      <app-form [wrapper]="angularTemplate"></app-form>
      <ng-template #angularTemplate let-angularTemplate="angularTemplate">
           <div class="WRAPPER">{{angularTemplate}}</div>
      </ng-template>
  `})
export class AppComponent  {}


@Component({
  selector: 'app-form',
  template: `
        <ng-container  *ngTemplateOutlet="wrapper;context {angularTemplate:inputText}" >
        </ng-container>
        <ng-template  #inputText>
             <input  [(ngModel)]="firstName" type="text" >
        </ng-template>
  `})
export class FormComponent  {

  @ContentChild(TemplateRef)
  @Input()
  wrapper: TemplateRef<any>;

  firstName = "John"
}

0 个答案:

没有答案