Question

更新帖子：对于那些询问的人，下面是事件组件的组件代码和服务代码。

Incident.Component.ts

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)
        );
}


}

Incident.Service.ts

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());
}

}

ORIGINAL POST ：我们正在使用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-news”和“rpcs-incident”选择器引导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>

我的问题是：有没有办法使用一个选择器而不必调用另一个？

调用Angular2组件选择器

0 个答案: