子路由组件中的Angular 5 Subject Observer不能被父路由组件缓存

Question

所以我正在使用这样的子路由来处理 angular 5,,:

const routes: Routes = [
  {
    path: 'inbox', component: InboxComponent,
    children: [
      { path: ':id', component: RequestDetailsComponent }
    ]
  },

  { path: '', redirectTo: '/inbox', pathMatch: 'full' },
  { path: '**', component: InboxComponent }

];

如果我加载了路由'inbox/id'，基本上我想更改收件箱组件中的某些内容......所以我希望收件箱组件执行一些操作，并且当我单击详细信息组件上的按钮时， ，我想更改父路由..让我们假设更改是 html 类添加 - 删除..

我使用Subject来观察变化，通过创建服务，收件箱服务，如下：

mport { Injectable } from "@angular/core";
import { ApiHelperService } from "../../shared/services/api-helper.service";
import { Subject } from "rxjs/Subject";
import { Question } from "../../models/question";

@Injectable()
export class InboxService {
    uri = 'questions?order=desc&sort=activity&site=stackoverflow&filter=!-*f(6rLIPlIq';
    colors = ['bg-primary-400', 'bg-purple-400', 'bg-info-400', 'bg-warning-400', 'bg-danger-400', 'bg-violet-400', 'bg-success-400'];
    public  openRequestDetails = new Subject<number>();

    changeView(view: number){
        this.openRequestDetails.next(view);
    }
}

在我的 RequestDetailsComponent 中，我正在像这样调用服务中的更改视图函数：

  onChangeView() {
    this.inboxService.changeView(this.mode);
  }

在我的 InboxCompnent 中，我订阅了这样的主题：

@Component({
  selector: 'app-inbox',
  templateUrl: './inbox.component.html',
  styleUrls: ['./inbox.component.scss'],
  providers: [InboxService]
})
export class InboxComponent implements OnInit, OnDestroy {

  private subscription: Subscription;
 ngOnInit() {
        this.subscription = this.inboxService.openRequestDetails
          .subscribe(
          (request: any) => {
            console.log(request);
          },
          (error: any) => console.log('error'),
          () => console.log('complete')
        )
}

作为参考，这是我的 app.module，我删除了不相关的导入：

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


import { AppComponent } from './app.component';
import { InboxComponent } from './inbox/inbox.component';
import { RequestComponent } from './inbox/request/request.component';
import { RequestDetailsComponent } from './inbox/request-details/request-details.component';
import { InboxService } from './inbox/inbox.service';
import { AppRoutingModule } from './routing/app-routing.module';
import { RouterModule } from '@angular/router';

@NgModule({
  declarations: [
    AppComponent,
    InboxComponent,
    RequestComponent,
    RequestDetailsComponent
  ],
  imports: [
    BrowserModule,
    HttpModule,
    AppRoutingModule
  ],
  providers: [ApiHelperService, InboxService],
  bootstrap: [AppComponent]
})
export class AppModule { }

最后，当我在子路由收件箱/123 时，此订阅永远不会触发...

任何想法？？？而且我不能使用子组件，它必须是子路由..因为我会有很多子路由。

如果我在同一个组件 RequestDetailsComponent 中添加了订阅.. 它工作正常..

Answer 1

我遇到了类似的问题，问题的根源在于服务的 DI。您是否在包含所有这些组件的共享模块中注入InboxService？检查模块的 providers 数组 - 你还没有在这里分享它。