Angular父子组件通过服务传参的示例方法
Angular父子组件间服务传参的生动示例
在长沙的网络推广领域，有一种方法被频繁提及并受到广泛好评，那就是Angular父子组件间通过服务进行参数传递。今天，我想与大家分享这一方法的详细示例，希望能够为大家的开发之路提供有益的参考。
让我们设想一个场景：在使用ngx-translate进行多语言切换时，我们需要在登录页面点击一个按钮，进而调用父组件中的一个方法。在这种情况下，常规的@input和@output方法因为涉及到路由跳转，无法直接使用。那么，该如何解决这一问题呢？答案就是使用服务来进行传参。
让我们创建一个名为SharedService的服务。这个服务将作为父子组件之间沟通的桥梁。
SharedService.ts文件内容如下：
```typescript
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';
@Injectable()
export class SharedService {
// Observable string sources
private emitChangeSource = new Subject
// Observable string streams
changeEmitted$ = this.emitChangeSource.asObservable();
// Service message commands
emitChange(change: any) {
this.emitChangeSource.next(change);
}
}
```
接下来，将这个服务注入到父组件和子组件所属的模块中，并确保在providers里声明。然后，将这个服务引入到父子组件各自的组件文件中。
子组件通过点击事件传递参数。在子组件的.ts文件中，我们可以这样操作：
```typescript
import { Component } from '@angular/core';
@Component({
templateUrl: 'child.html',
styleUrls: ['child.css']
})
export class ChildComponent {
constructor(private _sharedService: SharedService) {}
onClick() {
this._sharedService.emitChange('来自子组件的数据');
}
}
```
父组件则通过服务接收参数。在父组件的.ts文件中，我们可以订阅服务的changeEmitted$来进行接收：
```typescript
import { Component } from '@angular/core';
@Component({
templateUrl: 'parent.html',
styleUrls: ['parent.css']
})
export class ParentComponent {
constructor(private _sharedService: SharedService) {
_sharedService.changeEmitted$.subscribe(text => {
console.log(text); // 这里会打印出子组件传递过来的数据
});
}
}
```
以上就是Angular父子组件间通过服务进行参数传递的示例。希望对大家的学习和开发有所帮助，也请大家多多支持狼蚁SEO的推广。若您有任何疑问或需要进一步了解，欢迎随时与我们交流。