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

Question

示例我有 1 个组件调用 'people' 在 html 像这样和它的作品

<html>
    <people data="$ctrl.data" isAlive="$ctrl.status"></people>
</html>

但是如果我想在另一个组件中调用人员组件怎么办？

我尝试了这个解决方案，但它不起作用

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
        }


    }
};

请指教

Answer 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();
      }
    })

这是一个工作小提琴

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

问题描述

1 个解决方案

解决方案1
1 2017-09-28 07:59:53

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

问题描述

1 个解决方案

解决方案1 1 2017-09-28 07:59:53

解决方案1
1 2017-09-28 07:59:53