我正在尝试用innerHTML绑定/呈现html内容,但无法呈现{{...}}成角的。
代码如下:
<div [innerHtml]="TestString"></div>
test = " HTML Content ";
TestString = "<div>This is test code, i am trying to bind/render {{ test }} code with angular..,</div>";
试试看:
test = " HTML Content ";
TestString = `<div>This is test code, i am trying to bind/render ${this.test} code with angular..,</div>`
https://stackblitz.com/edit/Angular-ckxsp8?file=src/app/app.component.ts
如果您想从组件中的字符串计算模板,您可以创建自己的指令来执行此操作:
import {
Compiler, NgModule, Component, Input, ComponentRef, Directive,
ModuleWithComponentFactories, OnChanges, Type,
ViewContainerRef
} from '@angular/core';
import { CommonModule } from '@angular/common';
@Directive({
selector: '[compile]'
})
export class CompileDirective implements OnChanges {
@Input() compile: string;
@Input() compileContext: any;
compRef: ComponentRef<any>;
constructor(private vcRef: ViewContainerRef, private compiler: Compiler) {}
ngOnChanges() {
if(!this.compile) {
if(this.compRef) {
this.updateProperties();
return;
}
throw Error('You forgot to provide template');
}
this.vcRef.clear();
this.compRef = null;
const component = this.createDynamicComponent(this.compile);
const module = this.createDynamicModule(component);
this.compiler.compileModuleAndAllComponentsAsync(module)
.then((moduleWithFactories: ModuleWithComponentFactories<any>) => {
let compFactory = moduleWithFactories.componentFactories.find(x => x.componentType === component);
this.compRef = this.vcRef.createComponent(compFactory);
this.updateProperties();
})
.catch(error => {
console.log(error);
});
}
updateProperties() {
for(var prop in this.compileContext) {
this.compRef.instance[prop] = this.compileContext[prop];
}
}
private createDynamicComponent (template:string) {
@Component({
selector: 'custom-dynamic-component',
template: template,
})
class CustomDynamicComponent {}
return CustomDynamicComponent;
}
private createDynamicModule (component: Type<any>) {
@NgModule({
// You might need other modules, providers, etc...
// Note that whatever components you want to be able
// to render dynamically must be known to this module
imports: [CommonModule],
declarations: [component]
})
class DynamicModule {}
return DynamicModule;
}
}
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
})
export class AppComponent {
name = 'Product Name :'
price = '3'
template: string = `{{ name }} <b>{{ price }}$</b>`;
}
<div class="product">
<ng-container *compile="template; context: this"></ng-container>
</div>
演示:https://stackblitz.com/edit/Angular-eipbup?file=src%2fapp%2fapp.component.html
我试图用innerHTML绑定/呈现html内容,但无法呈现{{…}在角度上。 代码如下: 结果 这是测试代码,我正在尝试用angular..绑定/呈现{test}代码。。, 未绑定/呈现测试变量值。。。。
我已经成功地使用angular而不是“Open/Save”对话框在HTML中显示PDF文件。现在,我被困在试图显示Word文档中。我曾经显示一个Word文档,并成功地完成了显示,但我想限制文件在“新建”选项卡中打开,以便他无法下载
在angular 1中,绑定的工作方式类似于ng-bind-html=“htmlvalue”
GitCafe GitCafe 是一个由国人建立的类似于 GitHub 的第三方代码托管平台。 绑定 GitCafe 账号与 DaoCloud 账号 若需要将托管在 GitCafe 上的代码库做为 Docker 镜像的构建源,就需要先将 DaoCloud 账号与您的 GitCafe 账号进行绑定。 第一步 在任意页面的右上角点击「账号信息」,并在新的页面中进入「第三方账号」标签页。 第二步 点击
Coding Coding 是国内新兴的第三方代码开发、托管和项目管理平台,拥有良好的用户体验和完备的功能。 绑定 Coding 账号与 DaoCloud 账号 如需将托管在 Coding 上的项目代码拉取至 DaoCloud 并作为 Docker 镜像的构建基础,则需要先将您的 Coding 账号与 DaoCloud 账号绑定起来。 第一步 在任意页面的右上角点击「账号信息」,并在新的页面中进入
什么是 Bitbucket Bitbucket 与 GitHub 在代码管理上的功能相似,是 GitHub 以外的又一大第三方代码托管平台之一。 绑定 Bitbucket 账号与 DaoCloud 账号 如果要将托管在 GitHub 上的代码库做为 Docker 镜像的构建源,就需要先将 DaoCloud 账号与您的 Bitbucket 进行绑定。 第一步 在任意页面的右上角点击「账号信息」,并在