Javascript 将数据从两个组件传输到服务（2）

我最近在angular2中创建了两个组件（users.component和tasks.component），它们应该将数据传递给服务，服务将执行一些操作并将其传递给父组件

users.component.ts

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

  @Component({
    selector: 'users',
    templateUrl: 'app/users.component.html',
    styleUrls: ['app/users.component.css']
  })
  export class UsersComponent {
    usersArr: any[] = [];

    designUsers: any[] = [];
    frontendUsers: any[] = [];
    backendUsers: any[] = [];

    addUsersRow(): void {
      this.usersArr.push({});
    }

    recountUsers(i: number, userSpec: any): void {

            if (userSpec === 'd' || userSpec === 'D') {
                this.designUsers.push(this.usersArr[i]);
            } else if (userSpec === 'f' || userSpec === 'F') {
                this.frontendUsers.push(this.usersArr[i]);
            } else if (userSpec === 'b' || userSpec === 'B') {
                this.backendUsers.push(this.usersArr[i]);
            }

            for (let j = 0; j < this.designUsers.length; j++) {
              if (this.designUsers[j].spec == 'f' || this.designUsers[j].spec == 'b') {
                this.designUsers.splice(j, 1);
              }
            }

            for (let j = 0; j < this.frontendUsers.length; j++) {
              if (this.frontendUsers[j].spec == 'b' || this.frontendUsers[j].spec == 'd') {
                this.frontendUsers.splice(j, 1);
              }
            }

            for (let j = 0; j < this.backendUsers.length; j++) {

              if (this.backendUsers[j].spec == 'f' || this.backendUsers[j].spec == 'd') {
                this.backendUsers.splice(j, 1);
              }
            }

    }

    usersName(i: number, userName: any): void {
      this.usersArr[i].name = userName;
    }

    usersSpec(i: number, userSpec: any): void {

        this.usersArr[i].spec = userSpec;

        this.recountUsers(i, userSpec);
    }

    usersPrice(i: number, userPrice: any): void {
      this.usersArr[i].price = userPrice;
    }
  }

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

        @Component({
            selector: 'tasks',
            templateUrl: 'app/tasks.component.html',
            styleUrls: ['app/tasks.component.css']
        })
        export class TasksComponent {
            tasksArr: any[] = [];

            designTasks: any[] = [];
            frontendTasks: any[] = [];
            backendTasks: any[] = [];

            addTasksRow(): void {
              this.tasksArr.push({});
            }

            recountTasks(i: number, taskSpec: any): void {

                if (taskSpec == 'd' || taskSpec == 'D') {
                    this.designTasks.push(this.tasksArr[i]);
                } else if (taskSpec == 'f' || taskSpec == 'F') {
                    this.frontendTasks.push(this.tasksArr[i]);
                } else if (taskSpec == 'b' || taskSpec == 'B') {
                    this.backendTasks.push(this.tasksArr[i]);
                }

                for (let j = 0; j < this.designTasks.length; j++) {
                  if (this.designTasks[j].spec == 'f' || this.designTasks[j].spec == 'b') {
                    this.designTasks.splice(j, 1);
                  }
                }

                for (let j = 0; j < this.frontendTasks.length; j++) {
                  if (this.frontendTasks[j].spec == 'b' || this.frontendTasks[j].spec == 'd') {
                    this.frontendTasks.splice(j, 1);
                  }
                }

                for (let j = 0; j < this.backendTasks.length; j++) {

                  if (this.backendTasks[j].spec == 'f' || this.backendTasks[j].spec == 'd') {
                    this.backendTasks.splice(j, 1);
                  }
                }
            }

            tasksSpec(i: number, taskSpec: any): void {

                this.tasksArr[i].spec = taskSpec;

                this.recountTasks(i, taskSpec);

                console.log('tasksArr:');
                console.log(this.tasksArr);
            }

            tasksHours(i: number, taskHours: any): void {
                this.tasksArr[i].hours = taskHours;
            }
        }

我想实现这个结构：

从users.component中，我需要获取designUsers、frontendUsers和backendUsers，以及像designTasks之类的任务（每个数组）。问题是，是否有可能实现这种结构，如果没有，请帮助了解如何实现这种思想，谢谢。

查看此示例。有两个子组件，它们都可以更改某些服务的状态

@Component({
  selector: 'child1',
  template: `
      <button (click)="handle()">child 1</button>
  `,
})
export class Child1Component {
  constructor(private service: Service) {}

  handle() {
    this.service.child1State = true;
  }
}

@组件({
选择器：“child1”，
模板：`
儿童1
`,
})
导出类child1组件{
构造函数（私有服务：服务）{}
句柄（）{
this.service.child1State=true；
}
}

存在订阅服务状态更改的parrent组件：

@Component({
  selector: 'my-app',
  template: `
    <div>{{state}}</div>
    <child1></child1>
    <child2></child2>
  `,
})
export class App implements OnInit {
  state = 'unset';

  constructor(private service: Service) {}

  ngOnInit() {
    this.service.observable.subscribe(val => {
      if (val) {
        this.state = 'set';
      } else {
        this.state = 'unset';
      }
    });
  }
}

@组件({
选择器：“我的应用程序”，
模板：`
{{state}}
`,
})
导出类应用程序实现OnInit{
状态='unset'；
构造函数（私有服务：服务）{}
恩戈尼尼特（）{
this.service.observable.subscribe（val=>{
if（val）{
this.state='set'；
}否则{
this.state='unset'；
}
});
}
}

这是服务。它会在每次更改后检查状态，并在需要时通知订户组件：

@Injectable()
export class Service {
  private _child1State = false;
  private _child2State = false;
  private subject = new Subject<boolean>;
  observable = this.subject.asObservable();

  set child1State(val: boolean) {
    this._child1State = val;
    if (this.isAllSet()) {
      this.subject.next(true);
    }
  }

  set child2State(val: boolean) {
    this._child2State = val;
    if (this.isAllSet()) {
      this.subject.next(true);
    }
  }

  private isAllSet(): boolean {
    return this._child1State && this._child2State;
  }
}

@Injectable（）
出口类服务{
private _child1State=false；
private _child2State=false；
私人科目=新科目；
可观察=this.subject.asObservable（）；
设置child1State（val:boolean）{
这个。_child1State=val；
if（this.isAllSet（））{
this.subject.next（true）；
}
}
设置child2State（val:boolean）{
这个。_child2State=val；
if（this.isAllSet（））{
this.subject.next（true）；
}
}
private isAllSet（）：布尔值{
返回此。_child1State&此。_child2State；
}
}

查看此示例。有两个子组件，它们都可以更改某些服务的状态

@Component({
  selector: 'child1',
  template: `
      <button (click)="handle()">child 1</button>
  `,
})
export class Child1Component {
  constructor(private service: Service) {}

  handle() {
    this.service.child1State = true;
  }
}

@组件({
选择器：“child1”，
模板：`
儿童1
`,
})
导出类child1组件{
构造函数（私有服务：服务）{}
句柄（）{
this.service.child1State=true；
}
}

存在订阅服务状态更改的parrent组件：

@Component({
  selector: 'my-app',
  template: `
    <div>{{state}}</div>
    <child1></child1>
    <child2></child2>
  `,
})
export class App implements OnInit {
  state = 'unset';

  constructor(private service: Service) {}

  ngOnInit() {
    this.service.observable.subscribe(val => {
      if (val) {
        this.state = 'set';
      } else {
        this.state = 'unset';
      }
    });
  }
}

@组件({
选择器：“我的应用程序”，
模板：`
{{state}}
`,
})
导出类应用程序实现OnInit{
状态='unset'；
构造函数（私有服务：服务）{}
恩戈尼尼特（）{
this.service.observable.subscribe（val=>{
if（val）{
this.state='set'；
}否则{
this.state='unset'；
}
});
}
}

这是服务。它会在每次更改后检查状态，并在需要时通知订户组件：

@Injectable()
export class Service {
  private _child1State = false;
  private _child2State = false;
  private subject = new Subject<boolean>;
  observable = this.subject.asObservable();

  set child1State(val: boolean) {
    this._child1State = val;
    if (this.isAllSet()) {
      this.subject.next(true);
    }
  }

  set child2State(val: boolean) {
    this._child2State = val;
    if (this.isAllSet()) {
      this.subject.next(true);
    }
  }

  private isAllSet(): boolean {
    return this._child1State && this._child2State;
  }
}

@Injectable（）
出口类服务{
private _child1State=false；
private _child2State=false；
私人科目=新科目；
可观察=this.subject.asObservable（）；
设置child1State（val:boolean）{
这个。_child1State=val；
if（this.isAllSet（））{
this.subject.next（true）；
}
}
设置child2State（val:boolean）{
这个。_child2State=val；
if（this.isAllSet（））{
this.subject.next（true）；
}
}
private isAllSet（）：布尔值{
返回此。_child1State&此。_child2State；
}
}