未捕获的错误：无法解析 CountdownComponent 的所有参数：（？）

Posted 2023-03-13

【中文标题】未捕获的错误：无法解析 CountdownComponent 的所有参数：（？）

【英文标题】：Uncaught Error: Can't resolve all parameters for CountdownComponent: (?)

【发布时间】：2019-01-21 02:13:20

【问题描述】：

我正在尝试在我的应用程序中构建一个简单的组件以进行倒计时。每当我发球时，我都会不断收到这个未捕获的错误。请大家帮忙，我被踩到了

app.module.ts

import  BrowserModule  from '@angular/platform-browser';
import  NgModule  from '@angular/core';
import  FormsModule  from '@angular/forms';

import  AppComponent  from './app.component';
import  ContentComponent  from './content/content.component';
import  CountdownComponent  from './countdown/countdown.component';

@NgModule(
 declarations: [
    AppComponent,
    ContentComponent,
    CountdownComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
)
export class AppModule  

app.component.html

<app-count></app-count>

countdown.component.ts

import  Component  from '@angular/core';

@Component(
selector: 'app-count',
templateUrl: './countdown.component.html',
styleUrls: ['./countdown.component.css']
)

export class CountdownComponent 
dayleft: 100;

constructor(days: any) 
    setTimeout(() => 
        days = this.dayleft;
        days--;
    , 1000);

countdown.component.html

<p> daysleft </p>

【参考方案1】：

是的，有权将 days 作为 pramater 添加到类构造函数中，但在这里你不是如何创建和初始化 CountdownComponent 即时角为你做的，这就是为什么你得到一个错误 Can' t 解析 CountdownComponent 的所有参数： (?) ，当您将参数添加到组件构造器 angular 时尝试通过 Angular DI 系统注入，在这种情况下，您可以创建注入值并通过 @Inject 装饰器将其提供给类构造函数.

创建注入值

@NgModule(
  imports:      [ BrowserModule, FormsModule ],
  declarations: [ AppComponent, HelloComponent, CountComponent ],
  bootstrap:    [ AppComponent ],
  providers:[provide:'days',useValue:100]
)
export class AppModule  

组件

export class CountComponent implements OnInit 

  id: any; // to clear setInterval 
  constructor( @Inject('days') private days: number)  

  ngOnInit() 
    this.id = setInterval(() => 
      --this.days
      if (this.days === 0) 
        clearInterval(this.id)
      
    , 1000)
  

计数模板

days

应用组件

<app-count></app-count>

stackblitz demo

另一个解决方案是创建 Input 属性并像@Suren Srapyan 所说的那样使用它

【讨论】：

首选方法。正是我希望实现的目标

【参考方案2】：

从构造函数参数中删除days并通过@Input传递它。 Angular 无法在构造函数中注入 days: any。我认为您也不需要daysleft 属性。

export class CountdownComponent 

   @Input() days;

   constructor() 
      setTimeout(() => 
        this.days--;
      , 1000);
   

并像使用一样

<app-count [days]="100"></app-count>

这里将100 传递到CountdownComponent 并使用100 初始化days 属性。

【参考方案3】：

错误原因：

当 Angular 找到标签 <app-count></app-count> 时，他将尝试通过将 html 标签与 CountdownComponent 装饰器中的选择器属性匹配来初始化组件 CountdownComponent。这意味着角度代码将尝试执行以下操作：

let countdownComponent: CountdownComponent = new CountdownComponent()

由于您将天数定义为强制参数，因此角度不知道如何解析您定义的参数并导致错误。

第一个解决方案：

您可以通过使用 @Input decorator 并通过在 HTML 中传递要传递的值来告诉角度女巫是天的值。

<app-count [days]=100></app-count>

export class CountdownComponent 
    @Input()
    dayleft: number = 100;

    constructor(days: any) 
        setTimeout(() => 
            days = this.dayleft;
            days--;
        , 1000);
    

第二种解决方案： 可以设置参数为optional或default parameters.

constructor(days: any = 100) 
    setTimeout(() => 
        days = this.dayleft;
        days--;
    , 1000);


//or

constructor(days?: any) 
    if(!days) days = 100;
    setTimeout(() => 
        days = this.dayleft;
        days--;
    , 1000);

【讨论】：

第二种解决方案非常适合。非常感谢您的时间

谢谢@mitch。每次您喜欢答案时都会投票。另外，如果您认为答案解决了您的问题，请采纳为最佳答案