Angular 在服务文件中调用函数时从两个组件获取数据

我无法将数据从两个组件传递到共享服务中的

onSubmit（）

函数

当我访问

http://localhost:4200/r/g6g6g6

my

ReferralComponent

获取

g6g6g6

并将其设置为my

UserService

中的

codeSentIn

，然后将其定向到my

UserComponent

。然后，当有人在my

UserComponent

中提交表单时，它会将表单数据发送到

UserService

，但是，问题是这个过程会清除

codeSentIn

值，因为它会重新初始化服务文件（我认为）。如何将

codeSentIn

和表单数据同时放入我的

userService

文件中，以便我可以在

postaser（）中提交这两部分内容
my
userService中的函数

下面是我访问
http://localhost:4200/r/g6g6g6
然后继续提交表格

referral component loaded
g6g6g6
this should hopefully be correct?-> g6g6g6
User Component Appears!
[WDS] Live Reloading enabled.
The referral code sent to user service -> undefined

user.component.ts

import { Component, OnInit } from '@angular/core';
import { NgForm } from '@angular/forms';

import { User } from '../shared/user.model';
import { UserService } from '../shared/user.service';

@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: [
    './user.component.css'
  ],
  providers: [UserService]
})
export class UserComponent implements OnInit {
  constructor(private userService: UserService) {}

  ngOnInit() {
    console.log('User Component Appears!');
  }

  onSubmit(form: NgForm) {
    this.userService.postUser(form.value).subscribe(res => {
    });
  }
}


import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { UserService } from '../shared/user.service';

@Component({
  selector: 'app-referral',
  templateUrl: './referral.component.html',
  styleUrls: ['./referral.component.css'],
  providers: [UserService]
})
export class ReferralComponent implements OnInit {
  constructor(
    private route: ActivatedRoute,
    private router: Router,
    private userService: UserService
  ) {}

  ngOnInit() {
    this.codeProcessor();
  }

  codeProcessor() {
    console.log('referral component loaded');
    const code = this.route.snapshot.paramMap.get('code');
    console.log(code);
    this.userService.codeSentIn = code;
    console.log(
      'this should hopefully be correct?-> ' + this.userService.codeSentIn
    );
    this.router.navigate(['']);
  }
}

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/operator/toPromise';

import { User } from './user.model';
import { UserComponent } from '../user/user.component';

@Injectable({
  providedIn: 'root'
})
export class UserService {
  selectedUser: User;
  users: User[];
  readonly baseURL = 'http://localhost:3000/users';
  codeSentIn;

  constructor(private http: HttpClient) {}

  postUser(users: User) {
    console.log('The referral code sent to user service -> ' + this.codeSentIn);
    return this.http.post(this.baseURL, users);
  }

  getUserList() {
    return this.http.get(this.baseURL);
  }
}


reference.component.ts

import { Component, OnInit } from '@angular/core';
import { NgForm } from '@angular/forms';

import { User } from '../shared/user.model';
import { UserService } from '../shared/user.service';

@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: [
    './user.component.css'
  ],
  providers: [UserService]
})
export class UserComponent implements OnInit {
  constructor(private userService: UserService) {}

  ngOnInit() {
    console.log('User Component Appears!');
  }

  onSubmit(form: NgForm) {
    this.userService.postUser(form.value).subscribe(res => {
    });
  }
}


import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { UserService } from '../shared/user.service';

@Component({
  selector: 'app-referral',
  templateUrl: './referral.component.html',
  styleUrls: ['./referral.component.css'],
  providers: [UserService]
})
export class ReferralComponent implements OnInit {
  constructor(
    private route: ActivatedRoute,
    private router: Router,
    private userService: UserService
  ) {}

  ngOnInit() {
    this.codeProcessor();
  }

  codeProcessor() {
    console.log('referral component loaded');
    const code = this.route.snapshot.paramMap.get('code');
    console.log(code);
    this.userService.codeSentIn = code;
    console.log(
      'this should hopefully be correct?-> ' + this.userService.codeSentIn
    );
    this.router.navigate(['']);
  }
}

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/operator/toPromise';

import { User } from './user.model';
import { UserComponent } from '../user/user.component';

@Injectable({
  providedIn: 'root'
})
export class UserService {
  selectedUser: User;
  users: User[];
  readonly baseURL = 'http://localhost:3000/users';
  codeSentIn;

  constructor(private http: HttpClient) {}

  postUser(users: User) {
    console.log('The referral code sent to user service -> ' + this.codeSentIn);
    return this.http.post(this.baseURL, users);
  }

  getUserList() {
    return this.http.get(this.baseURL);
  }
}


user.service.ts

import { Component, OnInit } from '@angular/core';
import { NgForm } from '@angular/forms';

import { User } from '../shared/user.model';
import { UserService } from '../shared/user.service';

@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: [
    './user.component.css'
  ],
  providers: [UserService]
})
export class UserComponent implements OnInit {
  constructor(private userService: UserService) {}

  ngOnInit() {
    console.log('User Component Appears!');
  }

  onSubmit(form: NgForm) {
    this.userService.postUser(form.value).subscribe(res => {
    });
  }
}


import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { UserService } from '../shared/user.service';

@Component({
  selector: 'app-referral',
  templateUrl: './referral.component.html',
  styleUrls: ['./referral.component.css'],
  providers: [UserService]
})
export class ReferralComponent implements OnInit {
  constructor(
    private route: ActivatedRoute,
    private router: Router,
    private userService: UserService
  ) {}

  ngOnInit() {
    this.codeProcessor();
  }

  codeProcessor() {
    console.log('referral component loaded');
    const code = this.route.snapshot.paramMap.get('code');
    console.log(code);
    this.userService.codeSentIn = code;
    console.log(
      'this should hopefully be correct?-> ' + this.userService.codeSentIn
    );
    this.router.navigate(['']);
  }
}

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/operator/toPromise';

import { User } from './user.model';
import { UserComponent } from '../user/user.component';

@Injectable({
  providedIn: 'root'
})
export class UserService {
  selectedUser: User;
  users: User[];
  readonly baseURL = 'http://localhost:3000/users';
  codeSentIn;

  constructor(private http: HttpClient) {}

  postUser(users: User) {
    console.log('The referral code sent to user service -> ' + this.codeSentIn);
    return this.http.post(this.baseURL, users);
  }

  getUserList() {
    return this.http.get(this.baseURL);
  }
}


路线

const routes: Routes = [
  {
    path: 'r/:code',
    component: ReferralComponent
  },
  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full'
  },
  {
    path: '',
    component: UserComponent
  }
];

删除
提供程序：[UserService]
。这告诉Angular：专门为我的组件创建一个UserService实例，不要使用其他组件使用的实例。所以你建议创建第二个服务？可能是
转诊.service.ts
？我不希望这样做，因为我想让他们共享一个服务，这样他们就可以一起提交数据不，一点也不。我不知道你是怎么从我说的话中推断出来的。我说：删除
提供者：[UserService]
。我解释了为什么需要这样做：因为在一个组件上有
提供者：[UserService]
：为我的组件专门创建一个UserService实例，不要使用其他组件使用的实例。啊，从这两个组件。行了，谢谢！首先，为什么要添加
提供者：[UserService]
，为什么这是标准？根本不是标准。我不知道你从哪里弄来的。当您需要一个新的服务实例专门用于您的组件时，您可以这样做，这几乎是不可能的，尤其是当一个服务被providedIn修饰为“root”时，它的意思正好相反：应该在根模块级别提供该服务的一个实例，因此，它可以在任何地方注入，并在所有组件之间共享。