Question

我有两个角度分量SignupComponent和SignupSuccessComponent。我想将数据从SignupComponent传递到SignupSuccessComponent，目前我尝试过使用共享服务而没有运气。

@Component({
  selector: 'app-signup',
  templateUrl: './signup.component.html',
  styleUrls: ['./signup.component.scss']
})
export class SignupComponent implements OnInit {
  @ViewChild('signupForm') form: FormData;
  constructor(public router: Router, private userService: UserService, private signupService: SignupService) { }

  onSubmit() {
   //user object is gotten from a network request
   this.router.navigate(['/signup/success']);
   this.signupService.setUser(user);
  }
}

SignupSuccessComponent

@Component({
          selector: 'app-signup-success',
          templateUrl: './signup-success.component.html',
          styleUrls: ['./signup-success.component.scss']
        })
        export class SignupSuccessComponent implements OnInit {

          public user: User;

          constructor(public router: Router, private signupService: SignupService) { 
          }

          ngOnInit() {
            this.signupService.user$.subscribe(data => {
              this.user = data;
              console.log(this.user);
            })
          }
        }

这是共享服务

@Injectable()
export class SignupService {

    private user = new Subject<User>();

    user$ = this.user.asObservable();

    setUser(data: User) {
        this.user.next(data);
    }
}

似乎共享服务永远不会在SignupSuccessComponent

中获取任何数据

Answer 1

我决定使用本地存储在组件之间传递数据。

import { Injectable } from '@angular/core';
import { LocalStorageService } from 'angular-2-local-storage';

    @Injectable()
    export class SignupService {

        constructor(private localStorageService: LocalStorageService) {}

        setUser(data) {
            this.localStorageService.set('user.new', data);
        }

        getUser() {
            return this.localStorageService.get('user.new');
        }

        clearUser() {
            this.localStorageService.remove('user.new');
        }
    }

我可以在setUser中致电SignupComponent，并使用getUser ngOnInit <{1}}方法中的SignupSuccessComponent获取数据

Answer 2

在SignupSuccessComponent中，您将在ngOnInit中接收数据，该数据仅在组件生命周期的开始时执行一次。因此，当提交按钮触发onSubmit（）时，它不会更改SignupSuccessComponent中的任何内容。要更正，您需要以这种方式添加带有setter的@Input：

@Input()
  set name(name: string) {
    this._name = (name && name.trim()) || '<no name set>';
  }

  get name(): string { return this._name; }

https://angular.io/guide/component-interaction#intercept-input-property-changes-with-a-setter

Answer 3

您可以使用getUser（）方法返回用户对象。我已经创建了一个相同的演示：github链接：https://github.com/sachinkasana/sharedServiceDemo

** // SignupService

@Injectable()
export class SignupService {
   // private user = new Subject<User>();
   //I am taking this simple string type for your reference
 private user = "";
   // user$ = this.user.asObservable();
    setUser(data: string) {
        this.user=data;
    }
    getUser(){
        return this.user;
    }
}

**

// SignupComponentComponent

export class SignupComponentComponent  {
    @ViewChild('signupForm') form: FormData;
  constructor(public router: Router, private signupService: SignupService) { }

  onSubmit() {
   //user object is gotten from a network request
   this.router.navigate(['/signup/success']);
   this.signupService.setUser('Test User From signup');
  }
}

// SignupSuccessComponentComponent

export class SignupSuccessComponentComponent implements OnInit {
   public user: string;
    constructor(public router: Router, private signupService: SignupService){}
          ngOnInit() {
          this.user= this.signupService.getUser()
              console.log(this.user);
          }
}

Answer 4

我在不使用服务的情况下发布了解决方案，但使用了父子传播。 https://stackoverflow.com/a/45274521/1033326

在父级组件之间传递数据

4 个答案: