как передать данные между одним компонентом другого, который находится на той же розетке маршрутизатора

Question

app.component.html

У меня есть два компонента 1) Сбросить пароль 2) ЛогинКомпонент на той же роутер-розетке.

при успешном сбросе пароля. Я перенаправляю на компонент входа в систему. Как передать данные из ResetPassword в LoginComponent?

Я пытался использовать метод подписки, чтобы сделать это, но это не работает.

Может кто-нибудь помочь мне исправить это.

LoginService

export class LoginService{

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

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

LoginComponent

OnInit{

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

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

}

ResetComponent

OnInit(){

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

}

Answer 1

Попробуйте использовать приведенный ниже код в 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");
}

Спасибо.

Answer 2

Поменяйте на Init или 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)
    }
}

Answer 3

Для передачи данных между компонентами мы в основном используем @Input и @Output, но в вашем случае я не думаю, что это хороший подход.

Таким образом, вы можете просто передать message как строку параметров запроса (если данные не конфиденциальны ) из пароля для сброса в компонент входа в систему и затем отобразить в соответствии с требованиями.