我想在.ts文件中有一个模板字符串,并将其添加到NgTemplateOutlet.
我希望这会起作用,但事实并非如此.
<template [ngTemplateOutlet]="template" [ngOutletContext]="$implicit">
其中template是范围中的字符串变量.所以我实现了这个,但是这不起作用,因为我想要它.
import { Component,AfterViewInit } from '@angular/core';
import { ToastController } from 'ionic-angular';
import { ModalController } from 'ionic-angular';
import { DomSanitizer,SafeHtml} from '@angular/platform-browser';
@Component({
selector: 'dynamic-report',templateUrl: 'dynamicReport.html',})
export class DynamicReport implements AfterViewInit{
private _template: string;
context: any;
public get template() : SafeHtml {
return this.sanitizer.bypassSecurityTrustHtml(this._template);
}
constructor(public toastCtrl: ToastController,public modalCtrl:ModalController,private sanitizer: DomSanitizer) {
this._template = "<button (click)='testFunction1('2')'>Click here 2!</button>";
this.context = this;
}
testFunction1(message){
console.log(message);
}
ngAfterViewInit() {
}
}
HTML：
<template [ngTemplateOutlet]="report" [ngOutletContext]="$implicit">
</template>
<template #report>
<button (click)='testFunction1("1")'>Click here 1!</button>
<div [innerHtml]="template"></div>
</template>
结果如下：
我在视图中看到了按钮.
发送消息1的第一个按钮将1输出到控制台.但是,另一个按钮不打印任何消息.
更新Angular 5
原文链接：https://www.f2er.com/angularjs/142494.htmlngOutletContext已重命名为ngTemplateOutletContext
另见https://github.com/angular/angular/blob/master/CHANGELOG.md#500-beta5-2017-08-29
原版的
如果要使用包含Angular2特定语法(如绑定)的字符串,则需要在运行时创建一个组件,此字符串用作组件模板.另见Equivalent of $compile in Angular 2
$implicit可以像
<template [ngTemplateOutlet]="template" [ngOutletContext]="{$implicit: 'somecontextValue}">
然后你可以使somecontextValue可用
<template #report let-context>
<div>{{context}}</div> <!-- outputs `somecontextValue` -->
</template>
