Question

我正在重构两个组件之间有很多重复方法的代码。组件A是组件B的子组件，两者都可以是不同的实例，实际上它们应该是。我的问题是，在某些方法中我发出数据，当我在将方法传递给服务后尝试获取输入时，我无法将模板传递给模板。

我现在有这样的事情：

组件A和组件B正在发出事件，我没有改变这些方法，因为我无法分离该逻辑，如何更改服务端的输入并获取组件的更改？对此有何帮助？

component A 

export class CompA{
 template: ...
 ...
 inputs [
  'value1'
  'value2'
 ]
 outputs: [
 'doSomething'
 'doSomething2'
 'doSomething3'
 ] 

 public value1: string;
 public value2: string

 addLine(){
 //simple example
  if(this.value1 == ""){
   this.doSomething1.emit(3)

  // the functions are obviously bigger but i need this emit inside the service and catch the event in the component
  }
}

Answer 1

我不确定我理解这个问题。也许建立一个能够证明这个问题的傻瓜会对你有所帮助。

通常，如果您需要更新服务中的数据，只需设置值。

例如：

<强>服务

import {Injectable} from '@angular/core';

@Injectable()
export class ShareService {
   public data: string;

   setData(newdata : string){
       this.data = newdata;
   }

   clearData(){
       this.data = '';
   }
}

设置值的组件

export class PageA {
    constructor(private shareService: ShareService, private router: Router){
    }
    gotoPageB(){
        this.shareService.setData("Sample data");
        this.router.navigate(['pageb']);  
    }

}

获取值的组件

export class PageB {
    constructor(private shareService: ShareService){ }

    get somedata() : string {
      return this.shareService.data;
    }
}

这里的关键是在获取值的组件中使用getter属性（本例中为PageB），以便在数据服务值发生更改时随时更新。

这完全接近你的要求吗？

使用共享服务处理输入和输出

1 个答案: