【发布时间】：2017-01-02 02:00:35
【问题描述】：
一直在学习Angular 2我目前实现了Components as content。
我的 Bug-list.component.html 上有一个表，它连接到 firebase 3 从 bug 表中读取数据并使用 *ngFor 在表中显示此数据，如下所示：
当我点击 + Add Bug 按钮时，ngbModal 出现，允许我输入新数据并按保存，然后保存到 firebase - 注意：这是按预期工作的。
本期：
我想要实现的是，当用户在任一行上按下 edit 时，我传入该 bug 的 uniqueId 并尝试使用有关该 bug 的信息预先填充 ngbModal，然后允许最终用户编辑/保存或删除它，我使用 routerlink 执行此操作，如下所示：
<a [routerLink]="['/bug-detail', 1]">
Edit
</a>
但是，当我单击“编辑”时，这是我在控制台中看到的当前错误消息：
我也尝试过以编程方式导航，但出现了同样的错误。
现在在我通过ngbModal 加载的组件内部，这是.ts 文件：
** Bug Detail Component ** - 显示有关单个 Bug 的内容，通过 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，使用链接到该错误的值填充该组件，然后再次显示模式，允许用户编辑/删除.
肯定有办法传入uniqueId，填充ngbModal上的字段，然后显示出来。
更新
好的，在关注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，谁能解释我做错了什么？
【问题讨论】：
标签： angular modal-dialog components ng-bootstrap