角1.5返回HTML結果在使用其他組件

實例功能我有1組件調用「人」在HTML這樣其作品角1.5返回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 
     } 


    } 
};

請告知

來源

2017-09-28 bellpiapple

在你的榜樣，你使用''templateUrl ='」/main.html''。你想把「this.people」放在哪裏？ –

你爲什麼要生成的人在你的控制器組件模板？您可以將組件本身添加到輔助組件模板中。

例如

angular.module（ '應用'，[]）

.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>` 
})

更新

您可以直接將數據傳遞到您的組件的權利，你從你的外部的lib得到後。

.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

來源

2017-09-28 07:59:53 Korte

因爲我使用外部庫及其功能需要創建模板，然後發送到頁面的元素 – bellpiapple

檢查我的更新。 – Korte

角1.5返回HTML結果在使用其他組件

回答

相關問題