【问题标题】：how to pass data between one component to another which is on same router-outlet如何将一个组件之间的数据传递到同一路由器插座上的另一个组件
【发布时间】：2018-12-12 11:06:48
【问题描述】：

app.component.html

我有两个组件 1) 重置密码 2) 登录组件在同一个路由器插座上。

关于成功重置密码。我正在重定向到登录组件。如何将数据从 ResetPassword 传递到 LoginComponent？

我尝试使用订阅方法来执行此操作，但这不起作用。

谁能帮我解决这个问题。

登录服务

export class LoginService{

 private messageSource = new BehaviorSubject('');
    currentMessage = this.messageSource.asObservable();

setResetPassword(message: string) {
        this.messageSource.next(message)
    } 
}

登录组件

OnInit{

this._loginService.currentMessage.subscribe(message => {

    if (message !== undefined && message !== "") {
                this.toastr.info(message);
    }
});

}

重置组件

OnInit(){

this._loginService.setResetPassword("Password Changed Successfully");

}

【问题讨论】：

angular.io/guide/component-interaction 这是你的答案。使用@Input 和@Output
您有两个选择：服务和 OnInit 生命周期挂钩或输入和输出事件发射器。

标签： angular angular5

【解决方案1】：

为了在组件之间传递数据，我们基本上使用@Input 和@Output，但在你的情况下，我认为这不是好方法。

因此，您只需将message 作为查询参数字符串（如果数据非机密）从重置密码传递到登录组件，然后按要求显示。

【讨论】：

【解决方案2】：

在 LoginService 中尝试以下代码。

import { Injectable, EventEmitter} from "@angular/core";

@Injectable()
export class LoginService {

   currentMessage = new EventEmitter();

   setResetPassword(message: string) {
      this.currentMessage.emit(message)
   } 
}

并在提交函数中移动您的 ResetComponent 代码。

resetPassword() {
   this._loginService.setResetPassword("Password Changed Successfully");
}

谢谢。

【讨论】：

【解决方案3】：

改变 onInit ot ngOnInit 它对我有用

请检查以下代码供您参考

<div><a></a></div>
<div><b></b></div>

@Component({
    selector: 'b',
    template: `<input [(ngModel)]="data" /> 
                <button (click)="update()">update</button> `,
})
export class B implements OnInit {

    data

    constructor(public loginService: LoginService) {
    }

    ngOnInit() {

    }

    update() {
        this.loginService.update(this.data)
    }

}

@Component({
    selector: 'a',
    template: `<h1> {{data}}</h1> `,
})
export class A implements OnInit {

    data

    constructor(public loginService: LoginService) {
    }

    ngOnInit() {
        this.loginService.currentMessage.subscribe((data) => {
            this.data = data;
        })
    }
}

@Injectable({
    providedIn: "root"
})
export class LoginService {

    private messageSource = new BehaviorSubject('');
    currentMessage = this.messageSource.asObservable();

    update(message: string) {
        this.messageSource.next(message)
    }
}

【讨论】：