关键词：
【中文标题】如何从 Angular 2 中的数据渲染静态 Angular 组件？ [复制]【英文标题】：How can I render static Angular components from data in Angular 2? [duplicate] 【发布时间】：2017-05-13 07:00:44 【问题描述】：正如预期的那样，在 Angular 2 中，我可以创建组件，如果我在模板中使用它们，它们就会呈现。在这段代码中，"text" 是另一个组件上的选择器，如果我将一些字符串传递给 [value]，它会按预期工作：
@Component(
selector: 'my-app',
template: `
<div class="main">
<text [value]="testModel.data.value"></text>
</div>
`
)
export class AppComponent
name = 'Angular Example';
testModel =
data:
value: `Regular string text works fine.`
但我需要将字符串 html 数据传递到一个组件中，并且该数据还可以包含一个角度组件，更像这样：
@Component(
selector: 'my-app',
template: `
<div class="main">
<text [value]="testModel.data.value"></text>
</div>
`
)
export class AppComponent
name = 'Angular Example';
testModel =
data:
value: `<b>Some</b>
text value to
<inner-component>
this component gets ignored when text is rendered
</inner-component>
render
`
我已经看到了动态生成组件的其他答案，但我不需要它，只是我已经创建的静态预定义组件可能存在于我的数据字符串中。
这里是文本组件：
import Component, Input, ViewChild from '@angular/core';
@Component(
selector: 'text',
template: `
<div >
<div [innerHtml]="value">loading...</div>
</div>
`
)
export class TextComponent
@Input() value: string;
理想情况下，我传入的字符串会呈现任何 html 以及呈现任何 Angular。这是我在角度 1 中的意思：https://plnkr.co/edit/FacA3AwOqJA2QARK28c8?p=preview
编辑：不是重复的
我看不出这个笨蛋是怎么回答的：http://plnkr.co/edit/wh4VJG?p=preview
【问题讨论】：
有什么理由不想将其添加为子组件？ 我对任何方式都持开放态度，只要它可以在我的 html 字符串中的任何地方找到，甚至不止一次。.. 你应该这样做plnkr.co/edit/wh4VJG?p=preview 【参考方案1】：“我已经看到了动态生成组件的其他答案，但我不需要，只是我已经创建的静态预定义组件可能存在于我的数据字符串中。”
即使只是静态的预定义组件，Angular 也需要编译它，否则它会被视为普通的 html 标签。
在你的 html 中
<inner-component>
this component gets ignored when text is rendered
</inner-component>
innerHtml 指令只是用提供的 html 替换元素的内部 html，但它不会编译它，所以谁来负责编译你的 inner-component ?
因此，您需要找到一种方法来动态编译该 html 片段。
你应该在
How can I use/create dynamic template to compile dynamic Component with Angular 2.0?
Equivalent of $compile in Angular 2
一个有效的例子是http://plnkr.co/edit/wh4VJG?p=preview
【讨论】：
谢谢，但这些是我在谈论的其他答案。我制作了我正在寻找的这个 Angular 1 示例：plnkr.co/edit/FacA3AwOqJA2QARK28c8?p=preview @jssayin ，伙计，你正在使用 $scope.eval ！！！！ ，在Angular2中没有这样的东西，只有一种方法，那就是上面的链接，在Angular 2中渲染动态模板时如何提供@Input
】在Angular2中渲染动态模板时如何提供@Input【英文标题】：Howtoprovide@InputwhenrenderingdynamictemplateinAngular2【发布时间】：2017-09-1104:05:31【问题描述】：我正在尝试在运行时动态加载模板、渲染它并从模板内绑定到动态数据。按照***... 查看详情
Angular 2 - 如何在等待 http 请求完成时阻止 GUI 渲染
】Angular2-如何在等待http请求完成时阻止GUI渲染【英文标题】：Angular2-HowcanIblockGUIrenderingwhilewaitingonhttprequesttofinish【发布时间】：2017-01-2122:34:41【问题描述】：可以等待渲染GUI/组件并在任务完成时显示它。喜欢在浏览器中请求网... 查看详情
Angular2：如何在渲染组件之前加载数据？
】Angular2：如何在渲染组件之前加载数据？【英文标题】：Angular2:Howtoloaddatabeforerenderingthecomponent?【发布时间】：2016-06-0921:12:29【问题描述】：我试图在组件被渲染之前从我的API加载一个事件。目前我正在使用我从组件的ngOnInit函... 查看详情
Angular2：如何在渲染组件之前加载数据？
】Angular2：如何在渲染组件之前加载数据？【英文标题】：Angular2:Howtoloaddatabeforerenderingthecomponent?【发布时间】：2016-06-0921:12:29【问题描述】：我试图在组件被渲染之前从我的API加载一个事件。目前我正在使用我从组件的ngOnInit函... 查看详情
如何将数据绑定到 Angular 2 中的多个嵌套组件？
】如何将数据绑定到Angular2中的多个嵌套组件？【英文标题】：HowbinddatatomultiplenestedcomponentsinAngular2?【发布时间】：2018-04-1609:27:48【问题描述】：在使用以下结构的Angular4应用程序中：ComponentA从服务中获取以下模型：classViewModelpu... 查看详情
如何从另一个组件重新渲染特定组件模板？角 2
...文标题】：HowtoRe-renderspecificcomponenttemplatefromanothercomponent?Angular2【发布时间】：2018-03-0408:49:52【问题描述】：我正在尝试重新渲染一个angular2html模板，到目前为止，经过研究我发现我需要使用NgZone。所以我在做什么，在我的主要... 查看详情
路由器插座的Angular 2延迟渲染
】路由器插座的Angular2延迟渲染【英文标题】：Angular2delayrenderingofrouter-outlet【发布时间】：2017-04-2312:59:44【问题描述】：我正在开发一个具有多个组件的Angular2应用程序，这些组件依赖于通过http服务从服务器加载的一些数据（它... 查看详情
在 angular2 中渲染编辑表单。如何等待来自服务的数据？
】在angular2中渲染编辑表单。如何等待来自服务的数据？【英文标题】：Renderingeditformsinangular2.HowcanIwaitfordatafromservice?【发布时间】：2017-05-1202:07:50【问题描述】：我尝试渲染表单以使用来自服务的数据进行编辑，但出现错误，... 查看详情
如何从 Angular 2 中的 QueryList 获取子元素？
】如何从Angular2中的QueryList获取子元素？【英文标题】：HowcanIgetchildrenelementsfromQueryListinAngular2?【发布时间】：2018-01-2409:33:17【问题描述】：我是Angular2的新手。在我看来，在*ngFor中生成的相同子代很少。<ngb-panel*ngFor="letclientofc... 查看详情
Angular 2 Select - 从 Web 服务问题中加载数据
】Angular2Select-从Web服务问题中加载数据【英文标题】：Angular2Select-Loaddatafromwebservicetrouble【发布时间】：2017-03-2411:20:13【问题描述】：我正在使用ng2-select显示项目列表，以便用户可以搜索并从选择列表中找到合适的项目。我面临... 查看详情
如何从angular2中的observable获取数据
】如何从angular2中的observable获取数据【英文标题】：Howtogetdatafromobservableinangular2【发布时间】：2016-07-2313:23:13【问题描述】：我正在尝试使用rxjs在Angular中打印http调用的结果考虑下面的代码importComponent,Injectable,OnInitfrom\'@angular/cor... 查看详情
如何从 Angular 2 中的 url 获取查询参数？
】如何从Angular2中的url获取查询参数？【英文标题】：HowtogetqueryparamsfromurlinAngular2?【发布时间】：2016-06-1119:33:56【问题描述】：我使用angular2.0.0-beta.7。当一个组件加载到像/path?query=value1这样的路径上时，它会被重定向到/path。为... 查看详情
长数组列表渲染使 Angular.js 中的页面滚动变慢
】长数组列表渲染使Angular.js中的页面滚动变慢【英文标题】：LongarraylistrenderingmakespagescrollingslowinAngular.js【发布时间】：2017-06-2514:51:50【问题描述】：当尝试从一个数组（带有图像）呈现超过120个项目时，列表的滚动会变慢。基... 查看详情
如何从 ngOnInit Angular 中的服务获取数据
】如何从ngOnInitAngular中的服务获取数据【英文标题】：HowtogetdatafromaserviceinngOnInitAngular【发布时间】：2020-02-1220:22:20【问题描述】：我在尝试从http服务获取ngOnInit中的数据时遇到问题。当组件被触发时，我需要在var中设置我的数... 查看详情
如何在 Angular 2 中强制组件重新渲染？
】如何在Angular2中强制组件重新渲染？【英文标题】：Howtoforceacomponent\'sre-renderinginAngular2?【发布时间】：2016-05-0810:03:35【问题描述】：出于调试目的，我想强制一个组件重新渲染它的视图，这可能吗？【问题讨论】：“重新渲染... 查看详情
从 Angular Material 2 中的 MdDialog 返回数据
】从AngularMaterial2中的MdDialog返回数据【英文标题】：ReturningDatafromMdDialoginAngularMaterial2【发布时间】：2018-01-2017:26:43【问题描述】：我正在使用MdDialogModule来显示一个对话框窗口，其中包含一个输入字段。模态打开正常，我可以在... 查看详情
如何从rails 6中的json获取数据到Angular？
】如何从rails6中的json获取数据到Angular？【英文标题】：Howtogetdatafromjsoninrails6intoAngular?【发布时间】：2020-11-1507:19:14【问题描述】：我是js/angular的新手，我想使用rails6和Angular10编写一些“类似trello”的应用程序。我已经在rails应... 查看详情
如何从Angular 2中的子组件事件触发父组件中的本地引用？
】如何从Angular2中的子组件事件触发父组件中的本地引用？【英文标题】：HowtotriggerlocalreferenceinparentcomponentfromchildcomponenteventinAngular2?【发布时间】：2016-11-2719:31:45【问题描述】：我正在尝试使用Material2sidenav从子组件模板单击事... 查看详情