首页 > 解决方案 > Angular:父通过服务不工作订阅子组件的更改

问题描述

我以前实现过服务方法,但现在似乎不起作用。我的文件夹结构是这样的。

------createCompany
                      ------- Login  [login.component.ts,login.component.html]
                      ------- profile  [profile.component.ts,profile.component.html]
                      ------- common  [common.component.ts,common.component.html]

MycommonComponent基本上是我的父组件,它html看起来像这样。

    <div class="company-container">

          <router-outlet></router-outlet>

    </div>

这是我的createCompany.routing.ts文件。

    const routes: Routes = [
  {
    path: '',
    component: CompanyCommonComponent,
    children: [
      {
        path: 'create-company/:1',
        component: CompanyLoginComponent,
        resolve: {
          resolvedData: RouteResolverService
        },
        data: { apiUrl: Globals.urls.serviceProviders.codes, methodType: 'GET', paramsAvailable: false }
      },
      {
        path: 'create-company/:2',
        component: CompanyProfileComponent
      },
      {
        path: 'create-company/:3',
        component: CompanyDetailComponent
      },
      {
        path: 'create-company/:4',
        component: CompanyPreviewComponent
      },
      {
        path: '',
        redirectTo: 'create-company/1',
      }
    ]
  }
];

现在我做了一个服务createCompany.service.ts,它看起来像这样。

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

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

  constructor() { }

  private messageSource = new BehaviorSubject(1);
  data$ = this.messageSource.asObservable();

  stepChanged(step: number) {
    this.messageSource.next(step)
  }

}

现在我正在订阅我的父组件中的更改,common.component.ts就像这样。但不幸的是,它只是第一次显示默认值。

commonComponent.ts(父级)

  export class CompanyCommonComponent implements OnInit {

  step: number;

  constructor(private data: CreateCompanyService) { }

  ngOnInit() {
    this.data.data$.subscribe(step => this.step = step)
    console.log(this.step)
  }
}

这是我的子组件,它正在调用服务功能,但父组件无法检测到它。

companyLogin.component.ts

    export class CompanyLoginComponent implements OnInit {
    constructor(private data : CreateCompanyService) { }
    next(stepType) {
      this.data.stepChanged(2)
    }
   }

请告诉我我做错了什么?我已经被困在这4个小时了。

标签: angularroutingparent-child

解决方案


推荐阅读