Question

组件A

我有一个带按钮的表单，应该调用服务类。该服务返回提取的JSON结果。

FOFDispatcher

A的模板：

compare() {
    this.getResults();
}

getResults() {
    this.resultService.getResults()
        .subscribe(
            results => this.results = results,
            error =>  this.errorMessage = <any>error);
}

服务类

<form (ngSubmit)="compare()" #compareForm="ngForm">
    <div class="col-md-5">
        <h1>Disk Forensics</h1>

        <div class="form-group">
            <label for="resourceA">Disk A</label>
            <select ngbDropDown class="form-control" id="resourceA" required [(ngModel)]="resourceA" name="resourceA">
                <option *ngFor="let r of disks" [value]="r.id">{{r.name}}</option>
            </select>
        </div>
        <div class="form-group">
            <label for="resourceB">Disk B</label>
            <select class="form-control" id="resourceB" required [(ngModel)]="resourceB" name="resourceB">
                <option *ngFor="let r of disks" [value]="r.id">{{r.name}}</option>
            </select>
        </div>

        <button type="button" (click)="compare()">Compare</button>

        <div class="error" *ngIf="errorMessage">{{errorMessage}}</div>
    </div>

    <h4>Mode</h4>
    <div class="radio">
        <label>
            <input type="radio" name="diffmode" id="diffmode1" value="diffmode1" checked>
            different
        </label>
    </div>
    <div class="radio">
        <label>
            <input type="radio" name="diffmode" id="diffmode2" value="diffmode2">
            identical
        </label>
    </div>
    <div class="radio">
        <label>
            <input type="radio" name="diffmode" id="diffmode3" value="diffmode3">
            Left only
        </label>
    </div>
    <div class="radio">
        <label>
            <input type="radio" name="diffmode" id="diffmode4" value="diffmode4">
            Right only
        </label>
    </div>
</form>

组件B

只是显示服务的结果

result.component.html：

public getResults(): Observable<Result[]> {
    let body = JSON.stringify('{}');

    var options:RequestOptionsArgs = {
      body: "{}"
    }

    return this.results = this.http.get(this.url, options)
                    .map(this.extractData)
                    .catch(this.handleError);
  }

result.component.ts：

<div class="col-md-12">
    <h1>Results:</h1>
    <div>
        <p *ngFor="let r of results; let i=index">
            {{i + 1}}: {{r}}
        </p>
    </div>
    <div class="error" *ngIf="errorMessage">{{errorMessage}}</div>
</div>

我想要的是从compare（） - 触发服务的函数触发，并使用结果更新result.html。

因为这是一个兄弟组件，假设我不能使用ViewChild属性。

非常感谢你的帮助

Answer 1

您可以在服务中使用公开Subject。

组件A将触发比较，组件B将使用结果。

看看这个plunker：https://plnkr.co/edit/5vny5d4rfudq06qrJAOR?p=preview

import {Component, NgModule, Injectable} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

import {Subject} from 'rxjs/Rx';

@Injectable()
export class MyService {

 public ResultsSubject = new Subject<string>();

 public getResults() {
   this.ResultsSubject.next('data...');
 }

}

@Component({
  selector: 'my-cmpA',
  template: `
    <div>
      <h3>Component A</h3>
      <button (click)="_srvc.getResults()">trigger service!</button>
    </div>
  `,
})
export class AComp {
  constructor(private _srvc: MyService) { }
}

@Component({
  selector: 'my-cmpB',
  template: `
    <div>
      <h3>Component B</h3>
      <p>
        {{_results}}
      </p>
    </div>
  `,
})
export class BComp {

  _results = '';

  constructor(private _srvc: MyService) {
    this._srvc.ResultsSubject.subscribe(
      res => this._results = res,
      err => console.log(err)
    );
  }
}

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
    </div>
    <my-cmpA></my-cmpA>
    <my-cmpB></my-cmpB>
  `,
})
export class App {
  name:string;
  constructor() {
    this.name = 'Angular2'
  }
}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App, AComp, BComp ],
  providers: [MyService],
  bootstrap: [ App ]
})
export class AppModule {}

Angular2调用兄弟组件中的函数

1 个答案: