Angular 1.5组件/需要依赖注入$ log

时间:2017-12-29 15:43:36

标签: javascript angularjs webpack components

我一直在尝试将$ log注入某个客户端Angular的require语句创建的组件。

var App = require('./app/containers/App');
var Header = require('./app/components/Header');
require('angular-ui-router');
var routesConfig = require('./routes');

import './index.css';
angular
  .module('app', ['ui.router'])
  .config(routesConfig)
  .controller(App.App, ['$log'])
  .service('todoService', todos.TodoService)   
  .component('app', App)
  .component('headerComponent', Header);

标题的代码是

module.exports = {
  template: require('./Header.html'),
  controller: Header,
  bindings: {
    todos: '='
  }
};

/** @ngInject */
function Header(todoService) {
  this.todoService = todoService;
}

Header.prototype = {
  handleSave: function (text) {
    if (text.length !== 0) {
      this.todos = this.todoService.addTodo(text, this.todos);
    }
  }
};


App的代码是

module.exports = {
  template: require('./App.html'),
  controller: App
};

function App($log) {

  this.log = $log;
  $log.error('Hello from App');
}

我可以注入$ log作为App的依赖项,因为我可以访问控制器。但是为Header尝试相同的任务很困难,因为Header是由require创建的,似乎不允许访问控制器功能。

我想知道的是有一种解决方法吗? 我试图找到一种从header.js中的任何可能的javascript函数记录信息的方法。

除了使用$ log在客户端应用程序中记录信息之外,我已经看到了任何其他选择

到目前为止,我的解决方案是在require块中编写的代码中。

  var ing = angular.injector(['ng']);
  this.$log = ing.get('$log');

  this.$log.error('I am a message');

我认为这是错误的做事方式,它给了我想要的东西,但我希望它会在某些时候破裂。我发现访问$ log只对调试很有用。对于任何生产代码我都不需要它。

1 个答案:

答案 0 :(得分:0)

我所要做的就是访问$ log angular wrapper。事实证明我所要做的就是将$ log添加到参数列表中。

function Header(todoService,$log) {
  $log.log('I am a log message');
  this.todoService = todoService;
}

我有点像Angular 1.5新手,我认为你必须注入$ log才能得到正确的答案。只是声明它似乎是一个kop out。