gpt4 book ai didi

javascript - Angular 1.5 通过使用另一个组件返回函数中的 html 结果

转载 作者:行者123 更新时间:2023-11-30 21:07:40 27 4
gpt4 key购买 nike

示例我在 html 中有 1 个组件调用“people”及其工作

<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
}


}
};

请指教

最佳答案

为什么要在 Controller 中生成人员组件模板?您可以只将组件本身添加到辅助组件模板中。

例如

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

关于javascript - Angular 1.5 通过使用另一个组件返回函数中的 html 结果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46463277/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com