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

【问题标题】：Angular 1.5 component/require dependency injection of $logAngular 1.5 组件/需要 $log 的依赖注入
【发布时间】：2018-06-10 00:48:09
【问题描述】：

我一直在尝试将 $log in 注入到由某些客户端 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 仅对调试有用。它不是任何生产代码都需要的东西。

【问题讨论】：

使用angular.injector 是一个常见的错误，因为它不像预期的那样工作，表明存在一些设计问题。该问题不包含App 和Header，虽然它们是相关的，并且您尝试做的事情应该在那里完成。
您似乎以错误的方式使用了.controller(App.App, ['$log'])。试试这个：.controller('App', ['$log', App.App])
在组件中，服务可注入到组件控制器的构造函数中。有关详细信息，请参阅AngularJS Developer Guide - Dependency Injection。
另外，您可以为您的App.App 指定$inject。这看起来像这样：App.App.$inject = ['$log']; inside ./app/containers/App 文件
显示Header 的代码。如果我们看不到该代码，就很难为您提供帮助。

标签： javascript angularjs webpack components

【解决方案1】：

我试图做的只是访问 $log 角度包装器。原来我所要做的就是将 $log 添加到参数列表中。

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

我是 Angular 1.5 的新手，我曾假设您必须注入 $log 才能获得正确的响应。只是宣布这似乎有点出格。

【讨论】：