У меня есть navbar-login (форма входа в navbar) и страница-логин (страница с формой входа, которую можно перенаправить). Форма входа в навигационную панель и форму входа в систему привязаны к двум каналам через службу (см. Первый код ниже).Передача данных в компонент после завершения маршрутизации
То, что я хочу, это следующий поток:
- Пользователь вводит адрес электронной почты и пароль в NavBar-логин
- При нажатии кнопки Submit, учетные данные отправляются в login.service
- Если полномочия неправильно, сервисные маршруты к авторизации-странице с учетными данными отображаются
двусторонний связывания с сервисом работает отлично, если страница-Войти является уже отображается. Но если он не отображается, и я вводим учетные данные и нажимаю кнопку, он только маршрутизируется на страницу-login, но не передает учетные данные.
Я использую следующие услуги, чтобы иметь Navbar-Логин и страниц Войти общаться друг с другом (двухсторонняя связывания через «несвязанных» компонентов):
export class LoginNav2PageService {
viewerChange: EventEmitter<{email:string,password:string}> = new EventEmitter();
constructor() {}
emitNavChangeEvent(user:{email:string,password:string}) {
this.viewerChange.emit(user);
}
getNavChangeEmitter() {
return this.viewerChange;
}
}
Это компонент Navbar, pass2page зацеплен с событием KeyUp в HTML входов:
export class LoginNavbarComponent {
user:= {email:'',password:''};
constructor(private _loginNav2pageService:LoginNav2PageService, private _loginService:LoginService){}
pass2page(){
this._loginNav2pageService.emitNavChangeEvent(this.user);
}
onNavbarLoginBtn(){
this._loginService.onNavbarLogin(this.user);
}
}
И это слушатель в компоненте страниц входа:
export class LoginPageComponent implements OnInit{
user= {email:"", password:""};
subscription:any;
constructor(private _loginNav2pageService:LoginNav2PageService){}
ngOnInit():any{
this.subscription = this._loginNav2pageService.getNavChangeEmitter().subscribe(user => this.setViewer(user));
}
setViewer(user:{email:string, password:string}){
this.user = user;
}
}
И, наконец, loginService:
export class LoginService{
constructor(private _router:Router, private _loginNav2pageService:LoginNav2PageService){}
//login User from Navbar
onNavbarLogin(user:LoginUserInterface){
//login and routing if successful
if(user.email === 'name' && user.password === '1234'){
console.log("Login Success");
//route to platform
}
//else route to login page to show validation errors to users
else {
this._router.navigate(['Login']);
this._loginNav2pageService.emitNavChangeEvent(user);
console.log("wrong credentials");
}
}
}
Похоже, вы сделали слишком много работы – micronyks
Только один общий доступ может делать то, что вы хотите. Его даже довольно сложно понять, чего вы пытаетесь достичь с данными. вам необходимо использовать единую общую службу с общим объектом. – micronyks
да ... после хорошего ночного сна я понял это :), код выше был фрагментом, который я адаптировал раньше в некоторых других частях .... Теперь я просто использую hqAfterViewInit Lifecycle Hook, чтобы получить данные из оказание услуг. Благодаря! –