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的推广。若您有任何疑问或需要进一步了解，欢迎随时与我们交流。