Angular: родительская подписка на изменения в дочернем компоненте через службу не работает - PullRequest
Новая
       37

Angular: родительская подписка на изменения в дочернем компоненте через службу не работает

0 голосов
/ 22 марта 2019

Я реализовал сервисный метод раньше, но, похоже, сейчас он не работает.У меня есть структура моей папки, подобная этой. 

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

Мой commonComponent в основном мой родительский компонент, и его html выглядит примерно так. 

    <div class="company-container">

          <router-outlet></router-outlet>

    </div>

Вот мойcreateCompany.routing.ts file. 

    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 (parent) 

  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 часов.

...