Question

service.ts：

  private showBoxAction = new Subject<any>();
  showBox = this.showBoxAction.asObservable();
  openBox() {
    console.log("in Box");

    this.showBoxAction.next(true);
  }

Component1.html

 <ng-template #noMsgs>
                  <div id="top" class="container">
                    <div class="row">
                      <div class="col-xs-12 explorer-results">
                        <div class="no-results-found">
                          <div class="joinUs">
                                <span>
                                  <p >Join us.</p>
                                  <a href="javascript:" (click)="showBox()" class="mat-button default">Start Now</a>
                                </span>
                            </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </ng-template>

component1.ts

      providers: [, DatePipe, FragmentParamsPipe],
import { environment } from "./../../../../environments/environment";
import { Http, ConnectionBackend } from "@angular/http";
import {
  Component,
  OnInit,
  OnDestroy,
  AfterViewInit,
  HostListener,
  Inject,
  NgZone,
  ViewChild,
  ElementRef,
  Output
} from "@angular/core";
import { DOCUMENT, Title } from "@angular/platform-browser";


import { Subscription } from "rxjs/Subscription";
import {
  CONSTANT,
  FEATURE,
  flattenJSON,
  unflattenJSON
} from "../../../Constants";
import { Observable } from "rxjs/Observable";
import { MatDialog, MatDialogRef } from "@angular/material";
import { BehaviorSubject } from "rxjs/BehaviorSubject";
import { Subject } from "rxjs/Subject";
import { Router, NavigationEnd, ActivatedRoute } from "@angular/router";
import { TabsetComponent } from "ngx-bootstrap";
import { Service } from "/src/app/services/service";
import { FragmentParamsPipe } from "../../../pipes/url/fragment-params.pipe";

declare let jQuery: any;
@Component({
  selector: "component1",
  templateUrl: "./component1.component.html",
  styleUrls: ["./component1.component.css"],
  providers: [QuestionControlService, DatePipe, FragmentParamsPipe],
  entryComponents: [DialogBoxComponent, MasterListComponent]
})
export class UserProfileComponent implements OnInit, OnDestroy, AfterViewInit {

  constructor(
    @Inject(DOCUMENT) private document: Document,
    private _service: Service,

  ) {


  }

  ngOnInit() {

  }


  /**
   * Display messageBox component.
   */
  showBox() {
      this._service.openComposeBox();
  }

  ngAfterViewInit() {

  }



  ngOnDestroy(): void {
  }




  }

Component2.ts

 private subscriptions = new Subscription();

  constructor(private _service:Service)
{

    this.subscriptions.add(
      this._service.showBox.subscribe(event => {
        if (event) {

        console.log("display box");
        }
      })
    );
}

当我单击show-box来触发showBox（）函数时，我在控制台“ in Box”中获得输出，但没有得到控制台“ display box”，即未预订可观察到的。当我的下一个触发器调用openBox（）时，observable成功订阅的原因可能是什么。我的实现有什么问题？

更新

问题只有在我通过component1.ts调用时才出现，这是我在应用中首次使用它。我尝试订阅而未将其添加到订阅中。

component2.ts

 ngOnInit() {
    this._service.showBox.takeUntil(this.destroy$).subscribe(event => {

      if (event) {
        this.displayCompose = true;
        console.log("display box");
      }
    })

  }



 ngOnDestroy(): void {

    this.destroy$.next(true);
    // Now let's also unsubscribe from the subject itself:
    this.destroy$.unsubscribe();

    this.subscriptions.unsubscribe();
  }
}

更新

我在帖子中提到的我的应用程序和组件的结构： my-angular-app \ src \ app \ components \ component1 \ componen1.ts

my-angular-app \ node_modules \ angular-app2 \ components \ component2-parent \ component2-parent.ts

my-angular-app \ node_modules \ angular-app2 \ components \ component2 \ component2.ts Component1.component.html：

     <ng-template #noMsgs>
                      <div id="top" class="container">
                        <div class="row">
                          <div class="col-xs-12 explorer-results">
                            <div class="no-results-found">
                              <div class="joinUs">
                                    <span>
                                      <p >Join us.</p>
                                      <a href="javascript:" (click)="showBox()" class="mat-button default">Start Now</a>
                                    </span>
                                </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </ng-template>

<component2-parent *ngIf="display"></component2-parent>

component1.ts

export class Component1 
showBox()
{
this.display = true;
_service.openBox()
}

component2-parent包含component2。

Answer 1

使用BahaviourSubject，以免丢失初始值

private showBoxAction = new BehaviorSubject <any>();

，并且还将您的订阅添加到ngOnInit()（而不是constructor）中。

ngOnInit() {
  this._service.showBox.subscribe(event => {
    if (event) {
      this.displayCompose = true;

    console.log("display box");
    }
  })

Answer 2

好的，让我们尝试另一种方式。

代替服务中的这一行代码。

showBox = this.showBoxAction.asObservable();

使用此方法

getShowBoxAction(): Observable<any> {
   return this.showBoxAction.asObservable();
}

然后在您的component2.ts中以这种方式订阅

// of course you can add this to your subscriptions-object as well.
this._service.getShowBoxAction().subscribe( event => {

    // the rest of your code

});

编辑：2018年7月15日下午1.29

您未致电正确的服务。这是您当前在component1中调用的内容：

// **
   * Display messageBox component.
   */
    showBox() {
        this._mailingService.openComposeBox();
    }

但是您必须致电service.ts！

showBox() {
    this._service.openBox();
}

请尝试替换任何代码。

主题调用next时，可观察到的不接收事件

2 个答案: