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

Question

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

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>

Answer 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 所说的那样使用它

Answer 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 属性。

Answer 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);
}