Twitter bootstrap 调用Angular2组件选择器

更新帖子：对于询问者，以下是事件组件的组件代码和服务代码

事件组件

import { Component } from "@angular/core";
import { IncidentService } from "./incident.service";
import { Incident } from "./incident";


@Component({ 
selector: "rpcs-incident",
templateUrl: "/app/incident.component.html",
providers: [IncidentService]
 })
export class IncidentComponent {
private incidents: Incident[];
private newIncident: Incident;
private _in: IncidentService;


constructor(incidentService: IncidentService) {
    this._in = incidentService;

    this._in.getAll()
        .subscribe(
        response => this.incidents = response,
        err => console.log("Error: ", err),
        () => console.log("Fetch incidents complete.", this.incidents)
        );
}


saveIncident(incident: Incident) {
    this._in.saveIncident(incident)
        .subscribe(
        response => this.incidents = response,
        err => console.log("Error: ", err),
        () => console.log("Save incident complete.", this.incidents)
        );

}

addIncident(incident: Incident) {
    this._in.addIncident(incident)
        .subscribe(
        response => this.incidents = response,
        err => console.log("Error: ", err),
        () => console.log("Add incident complete.", this.incidents)
        );

}

deleteIncident(incident: Incident) {
    this._in.deleteIncident(incident)
        .subscribe(
        response => this.incidents = response,
        err => console.log("Error: ", err),
        () => console.log("Delete incident complete.", this.incidents)
        );
}


}

事件服务

import { Injectable } from "@angular/core";
import { Http, Response } from "@angular/http";
import { SpringfieldService } from "./springfield.service";
import "rxjs/add/operator/map";
import { Incident } from "./incident";

@Injectable()
export class IncidentService extends SpringfieldService {
private url = this.baseUrl + "Incident";

constructor(private http: Http) {
    super();

}

getAll() {
    return this.http.get(this.url)
        .map((res: Response) => res.json());
}

getIncident(incidentId: number) {
    return this.http.get(this.url, incidentId)
        .map((res: Response) => res.json());
}

saveIncident(incident: Incident) {
    return this.http.put(this.url, incident)
        .map((res: Response) => res.json());
}

addIncident(incident: Incident) {
    return this.http.post(this.url, incident)
        .map((res: Response) => res.json());
}

deleteIncident(incident: Incident) {
    return this.http.delete(this.url, incident)
        .map((res: Response) => res.json());
}

}

原始帖子：我们正在利用Angular 2进行一次主要的应用程序重写。目前，我们的appmodule看起来像：

import { NgModule }      from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
import { HttpModule } from "@angular/http";
import { NewsComponent } from "./news.component";
import { IncidentComponent } from "./incident.component";

@NgModule({
  imports:      [ BrowserModule, FormsModule, HttpModule ],
  declarations: [ NewsComponent, IncidentComponent ],
  bootstrap: [NewsComponent, IncidentComponent]
})
export class AppModule { }

我们使用“rpcs新闻”和“rpcs事件”选择器分别引导NewsComponent和IncidentComponent。当在同一页上调用两个选择器时，一切都正常工作，但是如果我尝试调用rpcs incident并忽略rpcs news，则数据库中的数据在调用之前不会显示

现在，这是我调用选择器的一个片段：

  <div id="incident" class="tab-pane fade">

    <h3>Incidents</h3>   
    <div class="col-md-12">
        <rpcs-incident>...Loading Incidents</rpcs-incident>            
    </div>        

</div>

<div id="news" class="tab-pane fade">

    <h3>News</h3>
    <div class="col-md-12">
        <rpcs-news>...Loading News</rpcs-news>
     </div>


</div>

事件
…装载事件
新闻
…正在加载新闻

---

我的问题是：有没有一种方法可以使用一个选择器而不必调用另一个选择器

这听起来很奇怪。。您能否向我们展示组件代码，以及可能加载数据的服务代码？大多数情况下，您获取数据的可观察对象未从事件组件订阅。您在哪里添加数据库调用？如果它位于您正在使用的组件内，则不会调用它。请添加您的服务呼叫流。@FredrikLundin我已经为事件组件添加了组件和服务代码。@M.strow-hmm，仍然看不到您的代码中有任何错误。这两个组件及其模板在加载和绑定数据方面有何不同？（现在，您只向我们展示了事件组件，没有模板）