Búsqueda de sitios web

javascript - Error no detectado: No se pueden resolver todos los parámetros para CountdownComponent: (?)


Estoy tratando de construir un componente simple dentro de mi aplicación para una cuenta regresiva. Sigo recibiendo este error no capturado cada vez que hago ng serve. Por favor, un poco de ayuda, estoy atascado.

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>

Respuesta #1

Sí, es correcto agregar days como un parámetro al constructor de la clase, pero aquí no eres tú quien crea e inicializa la instancia de CountdownComponent, Angular lo hace por ti, por eso obtuviste un error No se pueden resolver todos los parámetros para CountdownComponent: (?). Cuando agregas un parámetro al constructor del componente, Angular intenta inyectarlo mediante el sistema de DI de Angular; en este caso, puedes crear un valor inyectable y proporcionarlo al constructor de la clase mediante el decorador @Inject.

crear valor de inyección

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

componente

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

}

plantilla de conteo

{{days}}

componente de la aplicación

<app-count></app-count>

demostración de stackblitz

Otra solución es crear una propiedad Input y usarla como dijo @Suren Srapyan

Respuesta #2

Elimina days del parámetro del constructor y pásalo mediante @Input. Angular no puede inyectar days: any en el constructor. Creo que tampoco necesitas la propiedad daysleft.

export class CountdownComponent {

   @Input() days;

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

}

y usar como

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

Aquí 100 se pasará al CountdownComponent e inicializará la propiedad days con 100.