Я изучаю Angular 2 В настоящее время я реализован Components as content.Показать содержимое на ngbModal при нажатии на строку таблицы - Угловая 2
У меня есть таблица на моем Bug-list.component.html, который подключается к firebase 3 считывает данные из таблицы ошибок и отображает эти данные в пределах таблицы, используя *ngFor, как показано здесь:
Когда Я нажимаю кнопку + Add Bug, появляется сообщение ngbModal, которое позволяет мне вводить новые данные и нажать save, который затем сохраняет до firebase - примечание: это работает как ожидалось.
Этот вопрос:
То, что я пытаюсь достичь, когда пользователь нажимает edit на любой из строк, я прохожу в UniqueID для ошибки и попытаться предварительно заполнить ngbModal с информацией о том, что ошибка, которая затем позволяет конечному пользователю редактировать его/сохранить или удалить его, я делаю это с помощью routerlink, как показано здесь:
<a [routerLink]="['/bug-detail', 1]">
Edit
</a>
Однако, когда я нажимаю на «Edit» это текущее сообщение об ошибке I см. в консоли:
Я также пробовал программно программировать, но появляется та же ошибка.
Теперь внутри компонента я загружаю через ngbModal это .ts файл:
** Ошибка Деталь Компонент ** - Отображение содержимого об отдельных ошибках, которые загружаются через ngbModal.
import { Component, OnInit, Input, OnDestroy } from '@angular/core';
// Routing
import { ActivatedRoute } from '@angular/router';
// Bootstrap
import { NgbModal, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
// Forms
import { FormGroup, FormControl, Validators, FormBuilder } from '@angular/forms';
// Services
import { BugService } from '../bugs/service/bug.service';
// Models
import { Bug } from '../bugs/model/bug';
// Validators
import { forbiddenStringValidator } from '../shared/validation/forbidden-string.validator';
@Component({
selector: 'bug-detail',
templateUrl: './bug-detail.component.html',
styleUrls: ['./bug-detail.component.css']
})
export class BugDetailComponent implements OnInit {
private bugForm: FormGroup;
private id: number;
private sub: any;
@Input() currentBug = new Bug(null, null, null, null, null, null, null, null, null);
constructor(private formBuilder: FormBuilder, private bugService: BugService, private route: ActivatedRoute, public activeModal: NgbActiveModal) { }
ngOnInit() {
this.sub = this.route.params.subscribe(params => {
this.id = +params['id']; // (+) converts string 'id' to a number
console.log(this.id);
});
this.configureForm();
}
ngOnDestroy() {
this.sub.unsubscribe();
}
configureForm() {
this.bugForm = new FormGroup({
title: new FormControl(null, Validators.required),
status: new FormControl(1, Validators.required),
severity: new FormControl(1, Validators.required),
description: new FormControl(null, Validators.required)
});
}
submitForm() {
this.addBug();
}
addBug() {
this.currentBug.title = this.bugForm.value["title"];
this.currentBug.status = this.bugForm.value["status"];
this.currentBug.severity = this.bugForm.value["severity"];
this.currentBug.description = this.bugForm.value["description"];
this.bugService.addBug(this.currentBug);
this.activeModal.close();
}
}
Как вы можете видеть, что я импортировал NgbActiveModal внутри конструктора для данного компонента.
Теперь это мой bug-list.component.ts: - Отображает все ошибки на столе, и когда нажата кнопка + Add Bug, она вызывает функцию open.
import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
import { BugService } from '../service/bug.service';
import { Bug } from '../model/bug';
import { NgbModal, NgbActiveModal, NgbModalRef, NgbModalOptions } from '@ng-bootstrap/ng-bootstrap';
import { BugDetailComponent } from '../../bug-detail/bug-detail.component';
import { ActivatedRoute, Router } from '@angular/router';
@Component({
selector: 'bug-list',
templateUrl: './bug-list.component.html',
styleUrls: ['./bug-list.component.css']
})
export class BugListComponent implements OnInit {
private bugs: Bug[] = [];
constructor(private bugService: BugService, private cdRef: ChangeDetectorRef, private modalService: NgbModal, private route: ActivatedRoute, private router: Router) { }
ngOnInit() {
this.getAddedBugs();
}
getAddedBugs() {
this.bugService.getAddedBugs().subscribe(bug => {
this.bugs.push(bug);
this.cdRef.detectChanges();
},
err => {
console.error("unable to get added bug - ", err);
});
}
open(options: NgbModalOptions = { size: 'lg' }): NgbModalRef {
const modalRef = this.modalService.open(BugDetailComponent, options);
modalRef.componentInstance.name = 'bugDetail';
return modalRef;
}
}
Так что мой вопрос, как я могу передать в ID по ошибке нажал на bug-detail.compoenent, заселить этот компонент со значениями, связанными с этой ошибкой, а затем отобразить модальный снова, позволяя пользователю редактировать/удалить ,
Несомненно, должен быть способ передать уникальный идентификатор, заполнить поля на ngbModal и затем отобразить его.
Update
ИТАК после выполнения component communication я создал службу:
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';
@Injectable()
export class BugCommunication {
// Literally copied straight from example.
private missionAnnouncedSource = new Subject<string>();
missionAnnounced$ = this.missionAnnouncedSource.asObservable();
announceMission(mission: string) {
this.missionAnnouncedSource.next(mission);
console.log(mission);
}
}
Эта услуга вводится в Bug-list.component.ts, когда пользователь нажимает кнопку редактирования, я затем вызвать вышеуказанную услугу, проходящей в значении как показано здесь:
editBug(bug: Bug) {
let mission = "Testing sevice";
this.comServe.announceMission(mission);
this.history.push(`Mission "${mission}" announced`);
}
Примечание: comServe - это название упомянутый выше сервис после его импорта.
Служба затем console.logs «Служба тестирования».
Внутри моего bug-detail.component.ts подписаться на вышеприведенном случае, как показано здесь:
ngOnInit() {
this.subscription = this.comServe.missionAnnounced$.subscribe(
mission => {
console.log(mission);
});
this.configureForm();
}
Однако всякий раз, когда я нажимаю на кнопку редактирования и вызова службы, bug-detail.component ничего не к консоли журнала.
Я правильно импортировал эту услугу в Module, может кто-то объяснить, что я делаю неправильно?