Question

我一直在学习Angular 2我目前已实施Components as content。

我的Bug-list.component.html上有一个连接到firebase 3的表，从错误表中读取数据，并使用*ngFor在表格中显示这些数据，如下所示：

当我点击+ Add Bug按钮时，会出现ngbModal，允许我输入新数据并按保存，然后保存到firebase - 注意：这是按预期工作的。

这个问题：

我想要实现的是当用户在任一行上按edit时，我会传入针对该错误的uniqueId并尝试使用信息预先填充ngbModal关于那个bug，然后允许最终用户编辑/保存或删除它，我使用如下所示的routerlink执行此操作：

 <a [routerLink]="['/bug-detail', 1]">
   Edit
 </a>

然而，当我点击＆＃39;编辑＆＃39;这是我在控制台中看到的当前错误消息：

我也尝试过编程导航，但出现了同样的错误。

现在在组件中我通过ngbModal加载这是.ts文件：

** 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＆＃34;测试服务＆＃34;。

在我的bug-detail.component.ts内，我订阅了上述事件，如下所示：

    ngOnInit() {
    this.subscription = this.comServe.missionAnnounced$.subscribe(
        mission => {
            console.log(mission);
        });

    this.configureForm();
}

但是，每当我点击编辑按钮并调用服务时，bug-detail.component都不会将任何内容记录到控制台。

我已将此服务正确导入Module，有人可以解释我的错误吗？

Answer 1

听起来您的订阅方法没有从您的服务中接收.next（）值。

this.missionAnnouncedSource.next(mission);

我相信这是因为您的observable正在观察任务属性，而您的服务正在将消息作为未命名的属性发送。阿卡：下一个（字符串）代码的两个部分需要更改

臭虫detail.component.ts

.subscribe(
    mission => {
        console.log(mission);
    });

BugCommunication

this.missionAnnouncedSource.next(mission);

这是一个很好的例子： http://jasonwatmore.com/post/2016/12/01/angular-2-communicating-between-components-with-observable-subject

单击表行时显示ngbModal上的内容 - Angular 2

1 个答案: