角度4:无法解析AlertComponent的所有参数 [英] Angular 4: Can't resolve all parameters for AlertComponent

问题描述

我不明白为什么会出现此错误:

I am not getting why I am getting this error:

compiler.es5.js:1694 Uncaught Error: Can't resolve all parameters for AlertComponent: (?, [object Object]).
    at syntaxError (compiler.es5.js:1694)
    at CompileMetadataResolver.webpackJsonp../node_modules/@angular/compiler/@angular/compiler.es5.js.CompileMetadataResolver._getDependenciesMetadata (compiler.es5.js:15781)
    at CompileMetadataResolver.webpackJsonp../node_modules/@angular/compiler/@angular/compiler.es5.js.CompileMetadataResolver._getTypeMetadata (compiler.es5.js:15649)
    at CompileMetadataResolver.webpackJsonp../node_modules/@angular/compiler/@angular/compiler.es5.js.CompileMetadataResolver.getNonNormalizedDirectiveMetadata (compiler.es5.js:15244)
    at CompileMetadataResolver.webpackJsonp../node_modules/@angular/compiler/@angular/compiler.es5.js.CompileMetadataResolver.loadDirectiveMetadata (compiler.es5.js:15106)
    at compiler.es5.js:26833
    at Array.forEach (<anonymous>)
    at compiler.es5.js:26832
    at Array.forEach (<anonymous>)
    at JitCompiler.webpackJsonp../node_modules/@angular/compiler/@angular/compiler.es5.js.JitCompiler._loadModules (compiler.es5.js:26829)

我们有一个Alert组件，我们正在使用该组件在同一页面(而不是弹出窗口)中显示成功或错误消息.现在，我必须添加一个弹出窗口，要求用户进行确认(确定或取消).因此，我使用了 stackblitz 中的代码.但是我不是要创建一个新组件.而是我想使用我现有的Alert组件.因此，我将代码从该示例移至了我的component/service/html.我现在正在学习Angular，请您帮忙.

We have an Alert component which we are suing to show success or error messages in same page (not in a popup). Now I have to add a popup where it will ask to user to confirm (OK or Cancle). So I used the code as it is in this stackblitz. But I am not trying to create a new component. Rather I want to use my existing Alert component. So I moved code from that example to my component/service/html. I am learning Angular now and need your help please.

app.module.ts

app.module.ts

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {HttpModule} from '@angular/http';
import { HttpClientModule } from '@angular/common/http';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

import {AppRoutingModule } from './app-routing.module';

import {InspectionService} from './inspection/inspection.service';
import {AlertService} from './alert/alert.service';

import {AppComponent} from './app.component';
import {AlertComponent} from './alert/alert.component';
import { InspectionComponent } from './inspection/inspection.component';

@NgModule({
    imports: [
        BrowserModule,
        HttpClientModule,
        FormsModule,
        HttpModule,
        AppRoutingModule,
        NgbModule.forRoot()
    ],
    providers: [
        AlertService,
        InspectionService,
    ],
    declarations: [
        AppComponent,
        AlertComponent,
        InspectionComponent,
    ],
    entryComponents: [ 
        AlertComponent 
    ],
    bootstrap: [AppComponent]
})
export class AppModule {
}

alert.component.html

alert.component.html

<div *ngIf="message"
     [ngClass]="{ 'alert text-center fade show': message, 'alert-success': message.type === 'success', 'alert-danger': message.type === 'error' }">
  {{message.text}}
</div>


<!--  Add below code to show confirm box -->
<div class="modal-header">
  <h4 class="modal-title">{{ title }}</h4>
    <button type="button" class="close" aria-label="Close" (click)="dismiss()">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    {{ message.text }}
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-danger" (click)="decline()">{{ btnCancelText }}</button>
    <button type="button" class="btn btn-primary" (click)="accept()">{{ btnOkText }}</button>
  </div>

alert.component.ts

alert.component.ts

import {Component, Input, OnInit} from '@angular/core';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';

import {AlertService} from "./alert.service";

@Component({
  moduleId: module.id,
  selector: 'alert',
  templateUrl: 'alert.component.html'
})

export class AlertComponent implements OnInit {
  //message: any; // This is my original declaration
  // Added below 4 variables for Confirm box
  @Input() title: string;
  @Input() message: string;
  @Input() btnOkText: string;
  @Input() btnCancelText: string;

    // constructor(private alertService: AlertService) {  }  // This my original constructor
  constructor(private alertService: AlertService, private activeModal: NgbActiveModal) {  }

  ngOnInit() {
    this.alertService.getMessage().subscribe(message => {
      this.message = message;
    });
  }

  // Added below 3 methods to support confirm box
  public decline() {
    this.activeModal.close(false);
  }

  public accept() {
    this.activeModal.close(true);
  }

  public dismiss() {
    this.activeModal.dismiss();
  }

}

alert.service.ts

alert.service.ts

import {Injectable} from '@angular/core';
import {Router, NavigationStart} from '@angular/router';
import {Observable} from 'rxjs';
import {Subject} from 'rxjs/Subject';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';

import { AlertComponent } from './alert.component';

@Injectable()
export class AlertService {
  private subject = new Subject<any>();
  private keepAfterNavigationChange = false;

  //  constructor(private router: Router) { // This is my original constructor
  constructor(private router: Router, private modalService: NgbModal) {
    // clear alert message on route change
    router.events.subscribe(event => {
      if (event instanceof NavigationStart) {
        if (this.keepAfterNavigationChange) {
          // only keep for a single location change
          this.keepAfterNavigationChange = false;
        } else {
          // clear alert
          this.subject.next();
        }
      }
    });
  }

  success(message: string, keepAfterNavigationChange = false) {
    this.keepAfterNavigationChange = keepAfterNavigationChange;
    this.subject.next({type: 'success', text: message});
  }

  error(message: string, keepAfterNavigationChange = false) {
    this.keepAfterNavigationChange = keepAfterNavigationChange;
    this.subject.next({type: 'error', text: message});
  }

  getMessage(): Observable<any> {
    return this.subject.asObservable();
  }

  // Added below method for Confirm box
  public confirm(
    title: string,
    message: string,
    btnOkText: string = 'OK',
    btnCancelText: string = 'Cancel',
    dialogSize: 'sm'|'lg' = 'sm'): Promise<boolean> {
    const modalRef = this.modalService.open(AlertComponent, { size: dialogSize });
    modalRef.componentInstance.title = title;
    modalRef.componentInstance.message = message;
    modalRef.componentInstance.btnOkText = btnOkText;
    modalRef.componentInstance.btnCancelText = btnCancelText;

    return modalRef.result;
  }

}

inspection.service.ts

inspection.service.ts

    sendMesage(inspection: Inspection) {
            this.alertService.success('Successfully created associate ', true); // This is working fine, i.e. showing message in same page at top

// I want to show confirm message by calling this method
            this.alertService.confirm("Ar you sure want to send message"); 
    }

推荐答案

最后，我决定不使用任何其他库，并在现有AlertService中添加了Confirm方法.现在，在模态弹出窗口的顶部(恰好位于导航窗格的下方)和确认"框(询问是/否)的同一屏幕上，我收到成功或错误消息.

Finally I decided not use any other library and added confirm method in my existing AlertService. Now I am getting success or error message on the same screen at the top (just below to navigation pane) and Confirm box (asking for Yes/NO) in a modal popup.

这是我的代码:

alert.component.html

alert.component.html

<div *ngIf="message && (message?.type == 'success' || message?.type == 'error')" 
                [ngClass]="{ 'alert text-center fade show': message, 'alert-success': message.type === 'success', 'alert-danger': message.type === 'error' }">
        {{message.text}}
</div>



<div *ngIf="message && message?.type == 'confirm'" class="modal" tabindex="-1" role="dialog" style="display:block!important">
    <div class="modal-dialog" role="document">
        <div class="modal-content">

            <div *ngIf="message?.type == 'confirm'"  class="modal-body">
                <div class="row">
                    <div class="col-md-12">
                        <h3 class="text-center">{{message.text}}</h3>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <p class="text-center">
                            <a (click)="message.noFn()">
                                <button class="btn btn-pm">No</button>
                            </a>
                            <a (click)="message.siFn()">
                                <button  class="btn btn-sc" >Yes</button>
                            </a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

alert.service.ts

alert.service.ts

import {Injectable} from '@angular/core';
import {Router, NavigationStart} from '@angular/router';
import {Observable} from 'rxjs';
import {Subject} from 'rxjs/Subject';

import { AlertComponent } from './alert.component';

@Injectable()
export class AlertService {
  private subject = new Subject<any>();
  private keepAfterNavigationChange = false;

  constructor(private router: Router) {
    // clear alert message on route change
    router.events.subscribe(event => {
      if (event instanceof NavigationStart) {
        if (this.keepAfterNavigationChange) {
          // only keep for a single location change
          this.keepAfterNavigationChange = false;
        } else {
          // clear alert
          this.subject.next();
        }
      }
    });
  }

  success(message: string, keepAfterNavigationChange = false) {
    this.keepAfterNavigationChange = keepAfterNavigationChange;
    this.subject.next({type: 'success', text: message});
  }

  error(message: string, keepAfterNavigationChange = false) {
    this.keepAfterNavigationChange = keepAfterNavigationChange;
    this.subject.next({type: 'error', text: message});
  }

  getMessage(): Observable<any> {
    return this.subject.asObservable();
  }

  confirm(message: string,siFn:()=>void,noFn:()=>void){
    this.setConfirmation(message,siFn,noFn);
  }

  setConfirmation(message: string,siFn:()=>void,noFn:()=>void) {
        let that = this;
        this.subject.next({ type: "confirm",
                    text: message,
                    siFn:
                    function(){
                        that.subject.next(); //this will close the modal
                        siFn();
                    },
                    noFn:function(){
                        that.subject.next();
                        noFn();
                    }
        });

  }
}

alert.component.ts

alert.component.ts

import {Component, Input, OnInit} from '@angular/core';

import {AlertService} from "./alert.service";

@Component({
  moduleId: module.id,
  selector: 'alert',
  templateUrl: 'alert.component.html'
})

export class AlertComponent implements OnInit {
  message: any;

  constructor(private alertService: AlertService) {  }

  ngOnInit() {
    this.alertService.getMessage().subscribe(message => {
      this.message = message;
    });
  }

}

这篇关于角度4:无法解析AlertComponent的所有参数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！