相关疑难解决方法(0)
如何将html绑定到Angular 2.0
在角度1绑定工作,如ng-bind-html ="htmlValue"
如何在Angular 2.0中绑定html
推荐指数
解决办法
查看次数
Angular 2返回html而不是字符串
我们假设我有这样的test属性:
export class SomeComponent implements OnInit {
testing = '<strong>Just testing</strong>';
}
我添加到我的test.component.html这一行:
{{ testing }}
输出将是<strong>Just testing</strong>.我希望它返回Just Testing.我怎样才能做到这一点？
推荐指数
解决办法
查看次数
Angular2,从组件内的字符串计算模板
可以从变量中的字符串中评估模板吗？我需要将字符串放在组件中而不是表达式中,例如
template: "<div>{{ template_string }}</div>"
template_string包含:<b>{{ name }}</b>
所有人都应该被评估 <div><b>My Name</b></div>
但我知道 <div>{{ template_string }}</div>
我需要类似{{ template_string | eval }}或其他东西来评估当前上下文中变量的内容.
这是可能的？我需要使用这种方法,因为template_string可以在使用组件时进行更改.
EDIT1:
角度版本:4.0.3
例如
@Component({
selector: 'product-item',
template: `
<div class="product">{{ template }}</div>`,
})
export class ProductItemComponent {
@Input() name: string;
@Input() price: number = 0;
@Input() template: string = `{{ name }} <b>{{ price | currency }}</b>`;
}
用法:
<product-item [name]="product.name" [price]="product.price"></product-item>
预计: 产品名称USD3.00
输出: {{ name }} <b>{{ price | currency …
推荐指数
解决办法
查看次数
使用angular2为innerHtml渲染CSS
我试图使用innerHTML和我从SQL获得的html + css字符串呈现HTML模板.
模板字符串示例:
<html xmlns="http://www.w3.org/1999/xhtml"> <head><title>Template Name</title><style type="text/css"> p{ color:red; }</style> </head> <body> <h1>#headding#</h1> <p style="color:red;">#paragraph#</p><a href="#url#">#urltext#</a> </body> </html>
现在它渲染HTML很好但看起来它会删除样式标记并只在其中呈现文本.
渲染示例:
HTML渲染部分:
<div [innerHtml]="templateBody">
</div>
Home.component.ts部分:
@Component({
selector: "home",
templateUrl: `client/modules/home/home.component.html`,
encapsulation: ViewEncapsulation.Emulated
})
export class HomeComponent implements OnInit{
templateBody: string;
.....other code
}
我已经尝试了封装:ViewEncapsulation.Emulated/None等,尝试了内联CSS,我尝试附加:host >>> inf标签.他们都呈现相同.
有什么建议？
推荐指数
解决办法
查看次数
为什么是 不工作
我想在添加的名字和姓氏之间添加空格。但是当我运行代码时，它不会增加空间。我也尝试添加 tab sapce 但它没有正确渲染。字符集设置为 utf-8，可以在附加的 html 中看到
export class AppComponent implements OnInit {
firstName: string;
lastName: string;
title: string;
clicked: boolean;
ngOnInit() {
this.firstName = `John`;
this.lastName = `Doe`;
}
printDetails(frstnm: HTMLInputElement, lstnm: HTMLInputElement, event: any): void {
this.firstName = frstnm.value || this.firstName;
this.lastName = lstnm.value || this.lastName;
this.title = `First Name is: ${this.firstName} Last Name is: ${this.lastName}`;
event.preventDefault();
this.clicked = true;
}
isVisible() {
const classes = {
display : this.clicked
}
return classes;
}
}<!doctype html>
<html lang="en"> …推荐指数
解决办法
查看次数
将 HTML 字符串转换为文本字符串的 Angular 方法
目前我正在使用
htmlToText(html: string) {
const tmp = document.createElement('DIV');
tmp.innerHTML = html;
return tmp.textContent || tmp.innerText || '';
}
为了任务。Angular 的做法是什么？或者这样做完全没问题吗？像这样直接访问会document导致问题吗，例如使用移动应用程序？
注意：有一个AngularJS 相关问题，但我正在寻找 Angular2+ 答案。另外，我不确定接受的答案中的正则表达式是否是正确的方法？
推荐指数
解决办法
查看次数
如何在角度2中设置div的"数据值"属性
<div data-value="{{tagName}}">{{tagName}}</div>
获取div错误的"数据值不是有效属性".
推荐指数
解决办法
查看次数
Angular 2错误:无法绑定到'innerhtml',因为它不是已知的本机属性
使用angular 2绑定DIV中的原始html
版本:Angular 2"2.0.0-rc.1"
关于index.html的参考:
<script src="~/lib/ng/shim.min.js"></script>
<script src="~/lib/ng/zone.min.js"></script>
<script src="~/lib/ng/Reflect.js"></script>
<script src="~/lib/ng/Rx.umd.js"></script>
<script src="~/lib/ng/core.umd.js"></script>
<script src="~/lib/ng/common.umd.js"></script>
<script src="~/lib/ng/compiler.umd.js"></script>
<script src="~/lib/ng/platform-browser.umd.js"></script>
<script src="~/lib/ng/platform-browser-dynamic.umd.js"></script>
索引HTML:
...
<div [innerHTML]="name"></div>
...
使用Javascript:
ng.platformBrowserDynamic.bootstrap(
ng.core
.Component(
selector: 'my-app',
template: <div [innerHTML]="name"></div>
)
.Class(
constructor: function()
{
name = "<div>Testing</div>"
}
)
)
错误:
EXCEPTION:模板解析错误:无法绑定到'innerhtml',因为它不是已知的本机属性("
#1 {{name}}
] [innerhtml] ="name">"):QuestOperationComponent @ 4:8EXCEPTION:错误:未捕获(在承诺中):模板解析错误:无法绑定到'innerhtml',因为它不是已知的本机属性("
#1 {{name}}
] [innerhtml] ="name">"):QuestOperationComponent @ 4:8
我已经尝试过:
[innerHtml]
[innerHTML]
[inner-Html]
[inner-html]
推荐指数
解决办法
查看次数
在Angular2项目中由Treant-js生成的HTML编译指令
TL; DR
我需要使用由treant-js动态添加到DOM的 Angular标记来制作Angular 评估/解析 HTML元素.
[更新30/09/17]
我遵循了那里提出的解决方案(涉及动态模块/组件创建).但是,这种实现存在越来越多的问题.
首先,我向子组件注入为父模块声明的所需依赖项(Router,ActivatedRoute等):
this.addComponent(
this.treeContainer.nativeElement.outerHTML,
{},
this.conversation.threads,
this.route,
this.router,
this.ws
);
这对我来说似乎是错误的,因为最合乎逻辑的方法是将这些依赖项直接注入到动态组件中(在动态模块中使用导入),但我无法做到这一点.
另外,因为treant-js需要直接将DOM附加到它创建的新HTML组件(我想是为了正确绑定事件),我无法在DOM 之前检索HTML字符串.所以,我发现的丑陋修复是:
- 使用
this.treeContainer.nativeElement.outerHTML(参见上面的代码片段)提取HTML字符串,然后将其作为动态组件的模板参数发送; - 因为会有2棵树(因为1),要删除由treant-js处理的初始treeContainer :
$(this.treeContainer.nativeElement).remove();.
我们在哪里？
除了前面提到的问题,我尝试过的解决方案根本不可接受.似乎treant-js 需要将其HTML元素附加到DOM以进行事件绑定和树存储/管理,因此当我复制树的HTML字符串以形成动态组件的模板时,第2棵树得到了很好的评估. Angular,但不再在treant-js框架下(例如:某些功能,如可折叠手柄将不再起作用).
总结一下:我无法让Angular和treant-j同时处理我的树标记.
此外,我用来避免重复树的丑陋技巧导致其他问题,当涉及到重新生成树时,无论是来自动态更新(由用户交互创建的新节点),还是导航到同一页面多个时间(路线).
最后但并非最不重要的是,我甚至无法使用一些ngModel来自导入模块的Angular标记(例如FormsModule):我得到一个错误,说不ngModel绑定输入元素.该模块当然是在我的父组件中导入的,我也尝试在动态模块中导入它:
private addComponent(template: string, properties: any = {}, threads: Thread[],
route: ActivatedRoute, router: Router, ws: WebSocketService) {
@Component({template})
class TemplateComponent implements …推荐指数
解决办法
查看次数
将 Angular 组件注入 FullCalendar 事件条目
PrimeNG 7引入了一个<p-fullCalendar>将FullCalendar 4.0库包装为 Angular 组件的组件。例如
<p-fullCalendar [options]="options" [events]="events"></p-fullCalendar>
FullCalendar 选项包括eventRender选项以指定一个函数来自定义事件在日历中的呈现方式。我在下面的示例中使用了它，但它使用标准 Javascript生成DOM 元素，因此不能包含任何其他 Angular 组件，例如示例中的 Material design-styled 按钮（它仍然创建一个基本的无样式按钮，因为标准<button>用来）。
我曾尝试研究诸如使用 Angular 的[innerHTML], ViewContainerRefwithComponentFactoryResolver或 Angular 的运行时 JIT 编译器之类的选项，但我不太了解这些方法中的任何一种，或者不知道哪种方法最适合这个用例。如何将 Angular 组件注入 FullCalendar 事件条目？
它不需要是完全动态的，例如，隐藏组件已经存在于页面上但显示在正确的位置，或者ng-templates只是以不同的方式实例化可能没问题，只要它显示并像一个正确的条目一样工作在日历上。
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-calendar',
templateUrl: './calendar.component.html',
styleUrls: ['./calendar.component.scss']
})
export class CalendarComponent implements OnInit {
options: any;
events: any[];
constructor() { }
ngOnInit() …推荐指数
解决办法
查看次数
标签 统计
angular ×10
html ×2
javascript ×2
ecmascript-6 ×1
fullcalendar ×1
innerhtml ×1
ng-bind-html ×1
primeng ×1
templates ×1
typescript ×1