Question

app.component.ts

var top3Order = (from order in ekartEntities.Orders
                         join inventory in ekartEntities.Inventories on order.InventoryId equals inventory.InventoryId
                         group order by new
                         {
                             inventory.InventoryId,
                             inventory.Guid,
                             order.Quantity
                         } into g
                         orderby g.Key.Quantity descending //sum(Quantity)
                         select g.Key.Guid).Take(3).ToList();

app.component.html

import { Component } from '@angular/core';
import { HeroService } from './hero.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'aditya';

  constructor(private service : HeroService)
  {}
  sender()
  {
    this.service.addchanges("ab");
    this.service.addchanges("cd");
    this.service.addchanges("ef");
  }
}

hero.service.ts

<h3 (click)="sender()">Click me to send the value</h3>
<app-detail></app-detail>

app.module.ts

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class HeroService {

  constructor() { }

  area = new Subject();

  changeemitted = this.area.asObservable();

  addchanges(change)
  {
    console.log("entered at service");
    console.log("chnage getted",change);
    this.area.next(change);
  }
}

detail.component.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { DetailComponent } from './detail/detail.component';
import { HeroService } from './hero.service';

@NgModule({
  declarations: [
   AppComponent,
   DetailComponent
 ],
 imports: [
   BrowserModule
  ],
 providers: [HeroService],
  bootstrap: [AppComponent]
})
export class AppModule { }

detail.component.html

import { Component, OnInit } from '@angular/core';
import { HeroService } from '../hero.service';

@Component({
  selector: 'app-detail',
  templateUrl: './detail.component.html',
  styleUrls: ['./detail.component.css']
})
export class DetailComponent implements OnInit {

  constructor(private serviceFetcher:HeroService) {
  }

  ngOnInit() {
  }

  caller(){
    console.log("caller entered");
    this.serviceFetcher.area.subscribe(text => console.log("text detail",text));
  }
}

实际上我的所有服务都在工作，但问题是每当我调用sender（）时，在文本上使用click事件时，我的值都将用于服务并被存储。

 <p (click)="caller()">
 detail works!
 </p>

但是在那之后，当我调用caller（）时，单击文本上的事件使用，详细显示在component.html中没有调用subscribe方法，在控制台上仅显示输入的呼叫者。 detail.component.ts：22呼叫者已输入 detail.component.ts：29 ___________________________ 但是在那之后没有刷新，我再次调用sender（），在文本上单击事件使用，然后我的值消失了，subscribe方法也被调用了，

hero.service.ts:19 entered at service
hero.service.ts:22 chnage getted ab
hero.service.ts:18 ___________________________
hero.service.ts:19 entered at service
hero.service.ts:22 chnage getted cd
hero.service.ts:18 ___________________________
hero.service.ts:19 entered at service
hero.service.ts:22 chnage getted  ef

我试图将调试器放入并检查，但在那里可见，但“文本详细信息”可见。这是某种主题行为吗？你们能告诉mi我哪里出问题了吗，我只是尝试进一步探索而已。即使错误很小，也请让mi知道，而不是关闭表格。我想在调用caller（）方法时获取数据。

Answer 1

首先，您不应该一次又一次地订阅可观察对象，这将导致其内存泄漏。


    private subscription: Subscription; // unsubscribe it onDestroy

    caller() {
        if (!this.subscription) {
            this.subscription = this.serviceFetcher.changeemitted.subscribe((text) => {
                console.log(text);
            });
        }
    }

共享服务不起作用，表现出不同的行为

1 个答案: