我以前已经实现过服务方法,但现在似乎无法使用。我的文件夹结构像这样。
------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
文件。
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)
}
}
请告诉我我做错了什么?我已经被困了四个小时了。