Question

我有以下template.html：

<html>
...
   <my-tab></my-tab>
...
</html>

标记<my-tab>由tabTemplate.html表示，并由MyTab controller使用以下构造函数进行管理：

constructor(
   private firstService: FirstServiceClass,
){
   this.doSomething();  // this fuction uses firstService
 }

FirstServiceClass-自定义类。

我还有另一个标签，例如<my-tab2>, <my-tab3>等。它们由MyTab2, MyTab3 controllers管理。

这些控制器的代码几乎相同，它们之间的区别是构造函数中的参数。

我需要删除复制粘贴。

是否可以通过某种方式指定此参数？

Answer 1

使用组件绑定：

app.component("myTab", {
    bindings: {
        tab: "<"
    },
    controller: "myTabController",
    templateURL: "myTab.html"   
}

用法：

<my-tab tab="0"></my-tab>
<my-tab tab="1"></my-tab>

class myTabController {
    constructor (firstService) {
        //...
    }
    $onInit() {
         console.log(this.tab);
         //...
    }
}

有关更多信息，请参见

AngularJS Developer Guide - Component-based Architecture

对于tab="0"，需要使用myTabController constructor(firstService)。对于tab="1"，需要使用myTabController constructor(secondService)。可能吗？

使用$injector服务注入不同的服务：

app.component("myTab", {
    bindings: {
        tab: "<",
        service: "@"
    },
    controller: "myTabController",
    templateURL: "myTab.html"   
}

class myTabController {
    constructor ($injector) {
        this.$injector = $injector;
    }
    $onInit() {            
        this.tabService = this.$injector.get(this.service);
        //...
    }
}

用法：

<my-tab tab="0" service="firstService"></my-tab>
<my-tab tab="1" service="secondService"></my-tab>

有关更多信息，请参见

AngularJS $injector Service API Reference - get

Answer 2

您可以为my-tab创建一个指令，该指令将对此指令绑定新模板更好，并使用模型控制器进行逻辑处理。

Answer 3

/////此html将在父控制器中

 <div class="tabClass hide">
       <my-tab></my-tab>
 </div>

///////////////////

'use strict';
angular.module('demoApp').directive('myTab', function () {
    return {
        templateUrl: "~/MyTab.html",//Create a template for directive view named like MyTab
        restrict: "E",
        controller: function ($scope, $routeParams, $http, $filter, $modal ) {

        //essential code
        }

    };
});

//and finally add directive referance to index file or where you referances other js file in your project

如何将服务依赖项从模板注入控制器？

3 个答案: