[英]transform HTML string to Angular Components
let's say we do an API call and get some HTML DOM in a String . 假设我们进行API调用,并在String中获取一些HTML DOM 。 The content comes as HTML without angular, so I have first to transform it to Angular where I want and then compile it as angular.
内容是不带角度的HTML格式,因此我必须先将其转换为所需的Angular,然后再将其编译为Angular。
Example API response: API响应示例:
<div>
...some more html...
<h1>a header</h1>
...some more html...
<a href="somewhere.com" class="a-class" id="a-id">A Link</a>
...some more html...
</div>
I am transforming this to get all Anchors <a href="x"></a>
and converting them into angular components with inputs and outputs to be injected in the parent container and parsed all together , for example: 我正在对其进行转换,以获取所有锚点
<a href="x"></a>
,并将其转换为带有输入和输出的角度分量, 以将其注入到父容器中并一起解析 ,例如:
<angular-anchor
[href]="somewhere.com"
[innerClass]="thisClasses"
[innerID]="thisID"
[content]="thisContent">
</angular-anchor>
angular-anchor
contains a click method that execute code from outside these components but inside angular (from a service). angular-anchor
包含一个click方法,该方法从这些组件外部但在angular内部(从服务)执行代码。
By using [innerHTML]
in the parent container where the transformation is done by a pipe just before just like: 通过在父容器中使用
[innerHTML]
在此之前通过管道完成转换,就像:
<parent [innerHTML]="APIResponseHTML | transformAnchorsPipe"></parent>
Angular components inside will NOT be loaded and the whole work is just raw Angular parsed by safeHTML included in the Pipe transformation. 内部的Angular组件不会被加载 ,整个工作只是由Pipe转换中包含的safeHTML解析的原始Angular。
To solve this i used ng-dynamic library but is outdated and is not compatible with AOT compilation . 为了解决这个问题,我使用了ng-dynamic库,但是它已经过时并且与AOT编译不兼容 。 Despite this, I manage it to work with JIT compilation but this is not good for production and a lot less efficient .
尽管如此,我还是设法将其与JIT编译一起使用,但这对生产不利,效率低得多 。
Example of this approach, "parentDIV" is a standard HTML tag: 这种方法的示例“ parentDIV”是标准的HTML标签:
<parentDIV *dynamicComponent="APIResponseHTML | transformAnchorsPipe;
context: {dependency: dependencyName};">
</parentDIV>
context contains all dependencies required inside the new component, for example my third Service I am using in "angular-anchor" 上下文 包含新组件内部所需的所有依赖关系,例如,我在“ angular-anchor”中使用的第三项服务
From this point, I read several documents about Angular Elements or Dynamic Components Injector , but I could not get with it in my application. 从这一点来看,我阅读了一些有关Angular Elements或Dynamic Components Injector的文档,但是在我的应用程序中却找不到。
Is it there any good approach to use my custom angular components available with AOT using these methods I just mentioned or any other? 是否有什么好的方法可以使用我刚才提到的这些方法或其他方法来将我的自定义角度组件与AOT一起使用?
Thanks in advance. 提前致谢。 Ask me for more details if needed.
如果需要,请询问我更多详细信息。
<parent [innerHTML]="APIResponseHTML | transformAnchorsPipe"></parent>
inner html is not an known property of parent
if parent
is a component 如果
parent
是组件,则<parent [innerHTML]="APIResponseHTML | transformAnchorsPipe"></parent>
内部html不是parent
的已知属性
Pass your html as a string to any of the properties in parent
component - you can achieve using @Input()
decorator on your properties - you might have an idea about it 将html作为字符串传递给
parent
组件中的任何属性-您可以在属性上使用@Input()
装饰器-您可能对此有所了解
Finally try to pass the string as an inner html to any of your div
tags in parent.component.html
- i hope this will parse your html string and append the html inside specified div
最后尝试将字符串作为内部html传递给
parent.component.html
任何div
标记-我希望这将解析您的html字符串并将html附加到指定的div
If this didn't work - try to add html
encoding for your html string and then try to bind it - hope this will solve your first problem - happy coding :) 如果这不起作用-尝试为您的html字符串添加
html
编码,然后尝试将其绑定-希望这可以解决您的第一个问题-编码快乐:)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.