Диалог углового материала: ошибка: StaticInjectorError[TicketService]
У меня проблема с декларацией провайдеров. Основная логика заключается в том, что вы создаете сервис и объявляете его в AppComponent, который используется дочерними элементами. Но когда я использую декларацию родительского сервиса, я получаю ошибку.
Компонент приложения имеет поставщиков, поэтому я не должен объявлять тег поставщиков в CreateComponent. А также заголовок успешно использует этих провайдеров, но создает проблему с этим. Если вам нужно больше информации о коде, я могу предоставить его.
App.Component.ts
import { Component } from '@angular/core';
import { TicketService } from './tickets/ticket.service';
import { Ticket } from './tickets/ticket/ticket.model';
import { UserService } from './users/user.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
providers:[TicketService,UserService]
})
export class AppComponent {
constructor() { }
ngOnInit() {
}
}
App.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { TicketsComponent } from './tickets/tickets.component';
import { TicketComponent } from './tickets/ticket/ticket.component';
import { TicketDetailComponent } from './tickets/ticket-detail/ticket-detail.component';
import { UpdateTicketComponent } from './tickets/update-ticket/update-ticket.component';
import { Routes, RouterModule } from '@angular/router';
import { CommentsComponent } from './tickets/comments/comments.component';
import { CommentComponent } from './tickets/comments/comment/comment.component';
import {NgxPaginationModule} from 'ngx-pagination';
import { UsersComponent } from './users/users.component';
import { UpdateWindowComponent } from './tickets/update-ticket/update-window/update-window.component';
import { MatDialogModule, MatNativeDateModule } from '@angular/material';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { CreateTicketComponent } from './create/create-ticket.component';
const appRoutes: Routes = [
{ path: '', component: TicketsComponent },
{ path: 'dashboard', component: TicketsComponent },
{ path: 'ticket/:id', component: UpdateTicketComponent },
{ path: 'create', component: CreateTicketComponent }
];
@NgModule({
declarations: [
AppComponent,
HeaderComponent,
TicketsComponent,
TicketComponent,
TicketDetailComponent,
CreateTicketComponent,
UpdateTicketComponent,
CommentsComponent,
CommentComponent,
UsersComponent,
UpdateWindowComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
NgxPaginationModule,
FormsModule,
HttpModule,
MatNativeDateModule,
ReactiveFormsModule,
RouterModule.forRoot(appRoutes),
MatDialogModule
],
providers: [],
bootstrap: [AppComponent],
entryComponents: [UpdateWindowComponent,UpdateTicketComponent]
})
export class AppModule { }
header.component.ts
import { Component, OnInit } from '@angular/core';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
import { TicketService } from '../tickets/ticket.service';
import { Ticket } from '../tickets/ticket/ticket.model';
import { NgForm } from '@angular/forms';
import { UserService } from '../users/user.service';
import { CreateTicketComponent } from '../create/create-ticket.component';
@Component({
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {
constructor(public dialog: MatDialog, private ticketservice: TicketService,
private userService: UserService) { }
comments: any;
ngOnInit() {
console.log('Burda');
}
ticket:Ticket;
openCreateDialog() {
//console.log(this.selectedTicket.ticketName);
let dialogRef = this.dialog.open(CreateTicketComponent, {
height: '700px',
width: '600px'
});
dialogRef.afterClosed().subscribe(result => {
console.log('Burda1');
/* console.log("dialogRef.afterClosed => ");
this.ticket = new Ticket(20,
'Deneme',
'Deneme',
'Deneme',
'Deneme',
'Deneme',
this.userService.getUser(1),
this.userService.getUser(2),
this.comments
);
this.ticketservice.accessTickets().push(this.ticket); */
for (let entry of this.ticketservice.accessTickets()) {
console.log(entry.ticketName);
}
});
}
}
Create.component.ts
import { Component, OnInit, Inject } from '@angular/core';
import { NgForm } from '@angular/forms/src/directives/ng_form';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
import { TicketService } from '../tickets/ticket.service';
import { Ticket } from '../tickets/ticket/ticket.model';
import { User } from '../users/user.model';
import { UserService } from '../users/user.service';
@Component({
selector: 'app-create-ticket',
templateUrl: './create-ticket.component.html',
styleUrls: ['./create-ticket.component.css']
})
export class CreateTicketComponent implements OnInit {
constructor(private ticketService : TicketService,
private userService:UserService,
public dialogRef: MatDialogRef<CreateTicketComponent>,
@Inject(MAT_DIALOG_DATA) public data: any
) { }
ticket: Ticket;
comments: any;
//users: User[] = this.userService.getUsers();
ngOnInit() {
}
onNoClick(): void {
this.dialogRef.close();
}
OnCreate(form: NgForm) {
const value = form.value;
console.log('user => ' + value.itemName);
console.log('this.ticketservice.getIdSequence() => ' + this.ticketService.getIdSequence());
this.ticket = new Ticket(this.ticketService.getIdSequence(),
value.itemName,
value.itemSubject,
value.itemDescription,
value.itemStatus,
value.itemType,
this.userService.getUser(value.itemAssignee),
this.userService.getUser(value.itemReporter),
this.comments
);
console.log('user => ' + this.userService.getUser(value.itemAssignee).userFullName);
this.ticketService.accessTickets().push(this.ticket);
this.dialogRef.close();
/* for (let entry of this.ticketservice.getTickets()) {
console.log(entry.ticketName);
} */
}
}
Услуги по продаже билетов
import { Ticket } from "./ticket/ticket.model";
import { EventEmitter, Injectable } from "@angular/core";
import { Comment } from "./comments/comment.model";
import { User } from "../users/user.model";
export class TicketService {
ticketSelected = new EventEmitter<Ticket>();
nextSeq: number;
private tickets: Ticket[] = [
new Ticket(1, 'IT-1001',
'Lorem ipsum dolor sit amet, consectetur adipiscing elit?',
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ut porta mi. Sed commodo ac enim non egestas. Morbi pellentesque sodales lacus, nec facilisis lorem commodo quis. Aenean in enim vel erat ullamcorper eleifend ac et nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec risus dolor, imperdiet non sem sed, luctus rutrum quam. Vestibulum mollis pellentesque nisi, eget porta urna vehicula ac. Phasellus id nulla at purus consectetur ultricies. Ut tempus facilisis nulla eget facilisis. Donec diam magna, bibendum ac aliquet vitae, varius facilisis dui. Quisque sapien urna, gravida nec sem eleifend, sagittis vehicula dolor. Duis eu consectetur purus. Phasellus eu mi quam. Ut id leo vitae erat mollis dictum a ut leo. Proin ut efficitur sapien. Mauris interdum, turpis eget tincidunt consequat, sem lacus bibendum odio, id ultrices sem diam ut nibh.',
'Open',
'Task',
new User(4, 'murata', 'Murat Aydın', 'murataydin@gmail.com', '1234'
),
new User(4, 'murata', 'Murat Aydın', 'murataydin@gmail.com', '1234'
)
, []
),
new Ticket(2, 'IT-1002',
'Etiam velit leo, porttitor ultricies dictum quis, congue eget eros?',
'Vestibulum suscipit, mauris in dictum sodales, massa libero dapibus mauris, in imperdiet nisl ex in lorem. Quisque commodo in tellus et placerat. Curabitur nec velit sit amet ante molestie ultrices. In nibh justo, vulputate nec vestibulum ut, vehicula id est. Sed quis lorem tristique, volutpat sapien quis, scelerisque leo. Praesent eu vulputate orci. Integer consectetur leo nibh, at dignissim nulla effi',
'Open',
'Task',
new User(4, 'murata', 'Murat Aydın', 'murataydin@gmail.com', '1234'
),
new User(4, 'murata', 'Murat Aydın', 'murataydin@gmail.com', '1234'
)
, []
),
new Ticket(3, 'IT-1003',
'Nam eget eros vulputate, luctus augue eu, tempus tortor?',
'Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam sit amet fermentum leo. Ut tempus ornare ex ut sagittis. Donec vitae lacus eget massa tristique luctus eu quis tellus. Sed ac ligula eu leo consectetur aliquam. Curabitur et dapibus lectus, in auctor massa. Nam nec tellus ac tortor malesuada rutrum. Sed aliquam ut mi sed dapibus. Donec vestibulum ultrices arcu. Vivamus vestibulum et ex non luctus.',
'Open',
'Task',
new User(4, 'murata', 'Murat Aydın', 'murataydin@gmail.com', '1234'
),
new User(4, 'murata', 'Murat Aydın', 'murataydin@gmail.com', '1234'
)
, []
),
new Ticket(4, 'IT-1004',
'Integer porttitor dignissim lacus id vestibulum?',
'Yaygın inancın tersine, Lorem Ipsum rastgele sözcüklerden oluşmaz. Kökleri M.Ö. 45 tarihinden bu yana klasik Latin edebiyatına kadar uzanan 2000 yıllık bir geçmişi vardır. Virginiadaki Hampden-Sydney Collegedan Latince profesörü Richard McClintock, bir Lorem Ipsum pasajında geçen ve anlaşılması en güç sözcüklerden biri olan consectetur sözcüğünün klasik edebiyattaki örneklerini incelediğinde kesin bir kaynağa ulaşmıştır. Lorm Ipsum, Çiçero tarafından M.Ö. 45 tarihinde kaleme alınan "de Finibus Bonorum et Malorum" (İyi ve Kötünün Uç Sınırları) eserinin 1.10.32 ve 1.10.33 sayılı bölümlerinden gelmektedir. Bu kitap, ahlak kuramı üzerine bir tezdir ve Rönesans döneminde çok popüler olmuştur. Lorem Ipsum pasajının ilk satırı olan "Lorem ipsum dolor sit amet" 1.10.32 sayılı bölümdeki bir satırdan gelmektedir.',
'Open',
'Task',
new User(4, 'murata', 'Murat Aydın', 'murataydin@gmail.com', '1234'
),
new User(4, 'murata', 'Murat Aydın', 'murataydin@gmail.com', '1234'
)
, []
)
,
new Ticket(5, 'IT-1005',
'Integer porttitor dignissim lacus id vestibulum?',
'Yaygın inancın tersine, Lorem Ipsum rastgele sözcüklerden oluşmaz. Kökleri M.Ö. 45 tarihinden bu yana klasik Latin edebiyatına kadar uzanan 2000 yıllık bir geçmişi vardır. Virginiadaki Hampden-Sydney Collegedan Latince profesörü Richard McClintock, bir Lorem Ipsum pasajında geçen ve anlaşılması en güç sözcüklerden biri olan consectetur sözcüğünün klasik edebiyattaki örneklerini incelediğinde kesin bir kaynağa ulaşmıştır. Lorm Ipsum, Çiçero tarafından M.Ö. 45 tarihinde kaleme alınan "de Finibus Bonorum et Malorum" (İyi ve Kötünün Uç Sınırları) eserinin 1.10.32 ve 1.10.33 sayılı bölümlerinden gelmektedir. Bu kitap, ahlak kuramı üzerine bir tezdir ve Rönesans döneminde çok popüler olmuştur. Lorem Ipsum pasajının ilk satırı olan "Lorem ipsum dolor sit amet" 1.10.32 sayılı bölümdeki bir satırdan gelmektedir.',
'Open',
'Task',
new User(4, 'murata', 'Murat Aydın', 'murataydin@gmail.com', '1234'
),
new User(4, 'murata', 'Murat Aydın', 'murataydin@gmail.com', '1234'
)
, []
)
,
new Ticket(6, 'IT-1006',
'Integer porttitor dignissim lacus id vestibulum?',
'Yaygın inancın tersine, Lorem Ipsum rastgele sözcüklerden oluşmaz. Kökleri M.Ö. 45 tarihinden bu yana klasik Latin edebiyatına kadar uzanan 2000 yıllık bir geçmişi vardır. Virginiadaki Hampden-Sydney Collegedan Latince profesörü Richard McClintock, bir Lorem Ipsum pasajında geçen ve anlaşılması en güç sözcüklerden biri olan consectetur sözcüğünün klasik edebiyattaki örneklerini incelediğinde kesin bir kaynağa ulaşmıştır. Lorm Ipsum, Çiçero tarafından M.Ö. 45 tarihinde kaleme alınan "de Finibus Bonorum et Malorum" (İyi ve Kötünün Uç Sınırları) eserinin 1.10.32 ve 1.10.33 sayılı bölümlerinden gelmektedir. Bu kitap, ahlak kuramı üzerine bir tezdir ve Rönesans döneminde çok popüler olmuştur. Lorem Ipsum pasajının ilk satırı olan "Lorem ipsum dolor sit amet" 1.10.32 sayılı bölümdeki bir satırdan gelmektedir.',
'Open',
'Task',
new User(4, 'murata', 'Murat Aydın', 'murataydin@gmail.com', '1234'
),
new User(4, 'murata', 'Murat Aydın', 'murataydin@gmail.com', '1234'
)
, []
)
,
new Ticket(7, 'IT-1007',
'Integer porttitor dignissim lacus id vestibulum?',
'Yaygın inancın tersine, Lorem Ipsum rastgele sözcüklerden oluşmaz. Kökleri M.Ö. 45 tarihinden bu yana klasik Latin edebiyatına kadar uzanan 2000 yıllık bir geçmişi vardır. Virginiadaki Hampden-Sydney Collegedan Latince profesörü Richard McClintock, bir Lorem Ipsum pasajında geçen ve anlaşılması en güç sözcüklerden biri olan consectetur sözcüğünün klasik edebiyattaki örneklerini incelediğinde kesin bir kaynağa ulaşmıştır. Lorm Ipsum, Çiçero tarafından M.Ö. 45 tarihinde kaleme alınan "de Finibus Bonorum et Malorum" (İyi ve Kötünün Uç Sınırları) eserinin 1.10.32 ve 1.10.33 sayılı bölümlerinden gelmektedir. Bu kitap, ahlak kuramı üzerine bir tezdir ve Rönesans döneminde çok popüler olmuştur. Lorem Ipsum pasajının ilk satırı olan "Lorem ipsum dolor sit amet" 1.10.32 sayılı bölümdeki bir satırdan gelmektedir.',
'Open',
'Task',
new User(4, 'murata', 'Murat Aydın', 'murataydin@gmail.com', '1234'
),
new User(4, 'murata', 'Murat Aydın', 'murataydin@gmail.com', '1234'
)
, []
)
,
new Ticket(8, 'IT-1008',
'Integer porttitor dignissim lacus id vestibulum?',
'Yaygın inancın tersine, Lorem Ipsum rastgele sözcüklerden oluşmaz. Kökleri M.Ö. 45 tarihinden bu yana klasik Latin edebiyatına kadar uzanan 2000 yıllık bir geçmişi vardır. Virginiadaki Hampden-Sydney Collegedan Latince profesörü Richard McClintock, bir Lorem Ipsum pasajında geçen ve anlaşılması en güç sözcüklerden biri olan consectetur sözcüğünün klasik edebiyattaki örneklerini incelediğinde kesin bir kaynağa ulaşmıştır. Lorm Ipsum, Çiçero tarafından M.Ö. 45 tarihinde kaleme alınan "de Finibus Bonorum et Malorum" (İyi ve Kötünün Uç Sınırları) eserinin 1.10.32 ve 1.10.33 sayılı bölümlerinden gelmektedir. Bu kitap, ahlak kuramı üzerine bir tezdir ve Rönesans döneminde çok popüler olmuştur. Lorem Ipsum pasajının ilk satırı olan "Lorem ipsum dolor sit amet" 1.10.32 sayılı bölümdeki bir satırdan gelmektedir.',
'Open',
'Task',
new User(4, 'murata', 'Murat Aydın', 'murataydin@gmail.com', '1234'
),
new User(4, 'murata', 'Murat Aydın', 'murataydin@gmail.com', '1234'
)
, []
)
,
new Ticket(9, 'IT-1009',
'Integer porttitor dignissim lacus id vestibulum?',
'Yaygın inancın tersine, Lorem Ipsum rastgele sözcüklerden oluşmaz. Kökleri M.Ö. 45 tarihinden bu yana klasik Latin edebiyatına kadar uzanan 2000 yıllık bir geçmişi vardır. Virginiadaki Hampden-Sydney Collegedan Latince profesörü Richard McClintock, bir Lorem Ipsum pasajında geçen ve anlaşılması en güç sözcüklerden biri olan consectetur sözcüğünün klasik edebiyattaki örneklerini incelediğinde kesin bir kaynağa ulaşmıştır. Lorm Ipsum, Çiçero tarafından M.Ö. 45 tarihinde kaleme alınan "de Finibus Bonorum et Malorum" (İyi ve Kötünün Uç Sınırları) eserinin 1.10.32 ve 1.10.33 sayılı bölümlerinden gelmektedir. Bu kitap, ahlak kuramı üzerine bir tezdir ve Rönesans döneminde çok popüler olmuştur. Lorem Ipsum pasajının ilk satırı olan "Lorem ipsum dolor sit amet" 1.10.32 sayılı bölümdeki bir satırdan gelmektedir.',
'Open',
'Task',
new User(4, 'murata', 'Murat Aydın', 'murataydin@gmail.com', '1234'
),
new User(4, 'murata', 'Murat Aydın', 'murataydin@gmail.com', '1234'
)
, []
)
,
new Ticket(10, 'IT-1010',
'Integer porttitor dignissim lacus id vestibulum?',
'Yaygın inancın tersine, Lorem Ipsum rastgele sözcüklerden oluşmaz. Kökleri M.Ö. 45 tarihinden bu yana klasik Latin edebiyatına kadar uzanan 2000 yıllık bir geçmişi vardır. Virginiadaki Hampden-Sydney Collegedan Latince profesörü Richard McClintock, bir Lorem Ipsum pasajında geçen ve anlaşılması en güç sözcüklerden biri olan consectetur sözcüğünün klasik edebiyattaki örneklerini incelediğinde kesin bir kaynağa ulaşmıştır. Lorm Ipsum, Çiçero tarafından M.Ö. 45 tarihinde kaleme alınan "de Finibus Bonorum et Malorum" (İyi ve Kötünün Uç Sınırları) eserinin 1.10.32 ve 1.10.33 sayılı bölümlerinden gelmektedir. Bu kitap, ahlak kuramı üzerine bir tezdir ve Rönesans döneminde çok popüler olmuştur. Lorem Ipsum pasajının ilk satırı olan "Lorem ipsum dolor sit amet" 1.10.32 sayılı bölümdeki bir satırdan gelmektedir.',
'Open',
'Task',
new User(4, 'murata', 'Murat Aydın', 'murataydin@gmail.com', '1234'
),
new User(4, 'murata', 'Murat Aydın', 'murataydin@gmail.com', '1234'
)
, []
)
,
new Ticket(11, 'IT-1011',
'Integer porttitor dignissim lacus id vestibulum?',
'Yaygın inancın tersine, Lorem Ipsum rastgele sözcüklerden oluşmaz. Kökleri M.Ö. 45 tarihinden bu yana klasik Latin edebiyatına kadar uzanan 2000 yıllık bir geçmişi vardır. Virginiadaki Hampden-Sydney Collegedan Latince profesörü Richard McClintock, bir Lorem Ipsum pasajında geçen ve anlaşılması en güç sözcüklerden biri olan consectetur sözcüğünün klasik edebiyattaki örneklerini incelediğinde kesin bir kaynağa ulaşmıştır. Lorm Ipsum, Çiçero tarafından M.Ö. 45 tarihinde kaleme alınan "de Finibus Bonorum et Malorum" (İyi ve Kötünün Uç Sınırları) eserinin 1.10.32 ve 1.10.33 sayılı bölümlerinden gelmektedir. Bu kitap, ahlak kuramı üzerine bir tezdir ve Rönesans döneminde çok popüler olmuştur. Lorem Ipsum pasajının ilk satırı olan "Lorem ipsum dolor sit amet" 1.10.32 sayılı bölümdeki bir satırdan gelmektedir.',
'Open',
'Task',
new User(4, 'murata', 'Murat Aydın', 'murataydin@gmail.com', '1234'
),
new User(4, 'murata', 'Murat Aydın', 'murataydin@gmail.com', '1234'
)
, []
)
];
accessTickets() {
return this.tickets;
}
getTickets() {
return this.tickets.slice();
}
getIdSequence() {
return this.nextSeq = Object.keys(this.tickets).length + 1
}
getTicket(ticketid: number) {
const ticket: Ticket = this.tickets.find(
(s) => {
return s.ticketId == ticketid;
}
);
return ticket;
}
}
Структура программы 
1 ответ
Решение
По умолчанию Angular Material использует корневой инжектор по умолчанию для создания диалога.
Поскольку вы объявили провайдеров на AppComponent ваш диалог не имеет доступа к этим провайдерам.
Чтобы исправить это вы могли бы пройти ViewContainerRef экземпляр в диалоге конфигурации:
export class HeaderComponent {
constructor(public dialog: MatDialog, private vcRef: ViewContainerRef) { }
openCreateDialog() {
let dialogRef = this.dialog.open(CreateTicketComponent, {
height: '700px',
width: '600px',
viewContainerRef: this.vcRef <================= add this
});
}
В этом случае угловой материал будет использовать config.viewContainerRef.injector вместо по умолчанию:
const userInjector = config && config.viewContainerRef && config.viewContainerRef.injector;
https://github.com/angular/material2/blob/master/src/lib/dialog/dialog.ts#L269
Конечно, другое решение предоставляет TicketService на AppModule,