问题描述
我不明白为什么会出现此错误:
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">×</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的所有参数的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!