Angular 1.5 通过使用另一个组件在函数中返回 html 结果
Posted
技术标签:
【中文标题】Angular 1.5 通过使用另一个组件在函数中返回 html 结果【英文标题】：Angular 1.5 return html result in the function by using another component 【发布时间】：2018-03-09 20:25:21 【问题描述】：例如，我在 html 中有 1 个组件调用“人”，就像这样及其工作原理
<html>
<people data="$ctrl.data" isAlive="$ctrl.status"></people>
</html>
但是如果我想在另一个组件中调用 people 组件怎么办？
我尝试了这个解决方案，但它不起作用
import templateUrl from './main.html';
export const mainComponent =
bindings: ,
templateUrl,
controller: class MainComponent
constructor()
'ngInject';
$onInit()
this.data = name : test
this.status = 'ALIVE'
this.people = `<people data="$this.data"
isAlive="$this.status">
</people>`
console.log(this.people) //this should return a html template with
// complete data
;
请指教
【问题讨论】：
在您的示例中，您使用templateUrl = './main.html'。你想把this.people放在哪里？
【参考方案1】：
为什么要在控制器中生成人员组件模板？您可以将组件本身添加到辅助组件模板中。
例如
angular.module('app',[])
.component('people',
template:'<div style="color:green;">We are people</div>'
)
.component('alien',
template:`<div style="color:red">We are alien but we have people</div>
<people></people>`
)
更新
您可以在从外部库中获取数据后立即将数据传递给您的组件。
.component('people',
template: '<div style="color:green;">We are people, who got some $ctrl.data</div>',
bindings:
data: '<'
)
.component('alien',
template: `<div style="color:red">We are alien but we have people</div>
<people data="$ctrl.data.async"></people>`,
controller: function($timeout)
$ctrl = this;
$ctrl.data =
async: null
function getAsyncData()
$timeout(() =>
$ctrl.data.async = "Fooooo"
, 1000);
;
getAsyncData();
)
这是一个有效的fiddle
【讨论】：
因为我使用外部库，它的功能需要创建模板，然后发送到页面的元素以上是关于Angular 1.5 通过使用另一个组件在函数中返回 html 结果的主要内容，如果未能解决你的问题，请参考以下文章
Angular 1.5 组件通过 ngRoute 更新父控制器