“AppComponent”类型上不存在属性“alertService”和“options”

Question

我正在我的应用程序中实现警报服务，但是我收到错误

Property 'alertService' does not exist on type 'AppComponent'

和

Property 'options' does not exist on type 'AppComponent'

app.component.html：

<div class="form-group">
   <button [disabled]="frmSignup.invalid" type="submit" class="btn btn-primary btn-block font-weight-bold" 
   (click)="alertService.success('Success!!', options)">Submit</button>
</div>

app.component.ts：

export class AppComponent {
  public frmSignup: FormGroup;
  public message = "Congrats you have successfully created your account";

  constructor(private fb: FormBuilder) {
    this.frmSignup = this.createSignupForm();
  }

  createSignupForm(): FormGroup {
    return this.fb.group(
      {
       ........
      }
    );
  }

  submit() {
    // do signup or something
    console.log(this.frmSignup.value);
    alert(this.message);
  }

Answer 1

您需要在

alertService

 的构造函数中显式注入 

AppComponent

constructor(private fb: FormBuilder, alertService: AlertService) {
    this.frmSignup = this.createSignupForm();
    this.alertService = alertService;
}

这些选项也需要在组件中设置为公共属性。

---

但是：

更好的选择是创建一个类方法，您可以在单击事件上调用：

<div class="form-group">
   <button [disabled]="frmSignup.invalid" type="submit" class="btn btn-primary btn-block font-weight-bold" 
   (click)="handleClick()">Submit</button>
</div>

export class AppComponent {
  public frmSignup: FormGroup;
  public message = "Congrats you have successfully created your account";
  options = {};

  constructor(private fb: FormBuilder, private alertService: AlertService) {
    this.frmSignup = this.createSignupForm();
  }

  createSignupForm(): FormGroup {
    return this.fb.group(
      {
       ........
      }
    );
  }

  submit() {
    // do signup or something
    console.log(this.frmSignup.value);
    alert(this.message);
  }
  
  handleClick() {
    this.alertService.success('Success!!', options);
  }
}

---

注意：我不明白，为什么提交按钮不调用提交方法...

Answer 2

在您的AppComponent中声明或注入alertService之后。定义

选项

变量，未定义。要解决这些问题，您需要：

定义或删除选项：

如果选项是警报的配置对象，请在 AppComponent 中声明它并将其传递给服务。否则，如果不需要，请将其删除。

import { Component } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { AlertService } from './alert.service'; // Adjust the path as needed

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  public frmSignup: FormGroup;
  public message = 'Congrats you have successfully created your account';
  public options = { timeout: 5000 }; // Example configuration options

  constructor(private fb: FormBuilder, private alertService: AlertService) {
    this.frmSignup = this.createSignupForm();
  }

  createSignupForm(): FormGroup {
    return this.fb.group({
      // Define your form controls
    });
  }

  submit(): void {
    if (this.frmSignup.valid) {
      console.log(this.frmSignup.value);
      this.alertService.success(this.message, this.options);
    } else {
      this.alertService.error('Form is invalid');
    }
  }
}

更新app.component.html

<div class="form-group">
  <button 
    [disabled]="frmSignup.invalid" 
    type="submit" 
    class="btn btn-primary btn-block font-weight-bold" 
    (click)="submit()">Submit
  </button>
</div>

此方法可确保您的 AlertService 在 Angular 应用程序中正确使用。