angular - 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个小时了。
解决方案
推荐阅读
- flutter - Flutter - 滚动控制器没有被监听
- docusignapi - 如何在 DocuSign 中按用户管理模板?
- mysql - MySQL 默认空值
- swift - 快速声明变量
- linux - 如何编写linux内核模块来修改数据包的源MAC地址?
- unity3d - 将数据库链接到服务器上的 php 脚本到 c#
- android - Android Studio 预览版没有链接障碍
- python - 如何将唯一标识符与来自 Python 应用程序的 PostgreSQL 连接相关联?
- delphi - 如何遍历过滤的 dbGrid
- javascript - 如何通过在javascript中移动滑块来增加圆圈中的线条