如何在 Angular 构造函数中声明属性以便解析它们

Question

我想弄清楚为什么在向我的构造函数添加属性时出现 "Can't resolve all parameters..." 错误。我似乎经常遇到这个错误，所以我认为我对它的工作原理存在根本性的误解。

请注意，我已阅读有关依赖注入的 angular 指南，但这似乎并未涵盖我的用例。我想要做的具体事情是向我的组件添加动画，因此我将遵循本指南：https://angular.io/guide/animations.

下面的代码有效：（在它不会爆炸的意义上）

import { Component, OnInit } from '@angular/core';
import { trigger, state, style, animate, transition } from '@angular/animations';

@Component({
  selector: 'app-new-payment',
  templateUrl: './new-payment.component.html',
  styleUrls: ['./new-payment.component.scss'],
  animations: [
    trigger('loadState', [
        state('init', style({
            marginRight: '-400px',
            marginLeft: '400px'
        })),
        state('loaded', style({
            marginRight: '0px',
            marginLeft: '0px'
        })),
        transition('init => loaded', animate('100ms ease-in'))
    ])
  ]
})
export class NewPaymentComponent implements OnInit {

  constructor() { }

  ngOnInit() { }
}

然而，当我将构造函数更改为以下内容时：

constructor(public state = 'init') { }

我收到错误。

现在我不完全理解为什么我要将它添加到构造函数中，而不是我试图模仿教程中的示例。在本教程中，有一个名为 'state' 的参数，它的值从 'active' 到 'inactive'，这是触发动画的地方。在我的代码中，我希望将状态参数初始化为 'init'，然后我打算在 ngOnInit() 函数中将其更改为 'loaded'。这里的想法是每次加载组件时我的动画只会发生一次。

这里让我感到困惑的是为什么这个变量 'state' 即使在构造函数参数中也是如此？从我读到的内容来看，放入构造函数的东西应该是依赖项，但这只是一个变量，所以我不明白。

（注意，使用 Angular 5）

Answer 1

当您创建组件（指令、服务、 pipe) 并使用它而不使用 new 创建它的实例 - Angular 自动创建它的实例。 Angular 需要解析的组件构造函数中的每个参数都必须为依赖注入 (DI) 机制所知。 DI 尝试在 providers 中找到这些参数，这些参数被添加到 NgModule 或组件本身。 DI机制尝试根据

解析参数

1) type - public state: State。 DI 尝试解析类型 State 的实现。您可以在 State 类型下传递原始值、class 或其他类型。有关详细信息，请参阅 Angular Providers.

2) InjectionToken - @Inject(APP_CONFIG) config。 DI 尝试查找令牌 APP_CONFIG 下的内容。有关详细信息，请参阅 Angular Dependency injection tokens.

在您的情况下，DI 机制对参数 state 一无所知，因此它会向您抛出异常。您没有提供足够的相关信息 - type 或 InjectionToken.

如何在 Angular 构造函数中声明属性以便解析它们

How to declare properties in an Angular constructor so they can be resolved

dependency-injection

angular-components

angular