1

У меня есть navbar-login (форма входа в navbar) и страница-логин (страница с формой входа, которую можно перенаправить). Форма входа в навигационную панель и форму входа в систему привязаны к двум каналам через службу (см. Первый код ниже).Передача данных в компонент после завершения маршрутизации

То, что я хочу, это следующий поток:

  1. Пользователь вводит адрес электронной почты и пароль в NavBar-логин
  2. При нажатии кнопки Submit, учетные данные отправляются в login.service
  3. Если полномочия неправильно, сервисные маршруты к авторизации-странице с учетными данными отображаются

двусторонний связывания с сервисом работает отлично, если страница-Войти является уже отображается. Но если он не отображается, и я вводим учетные данные и нажимаю кнопку, он только маршрутизируется на страницу-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"); 
    } 
    } 
} 
+0

Похоже, вы сделали слишком много работы – micronyks

+0

Только один общий доступ может делать то, что вы хотите. Его даже довольно сложно понять, чего вы пытаетесь достичь с данными. вам необходимо использовать единую общую службу с общим объектом. – micronyks

+0

да ... после хорошего ночного сна я понял это :), код выше был фрагментом, который я адаптировал раньше в некоторых других частях .... Теперь я просто использую hqAfterViewInit Lifecycle Hook, чтобы получить данные из оказание услуг. Благодаря! –

ответ

0

после хороший ночной сон я понял это :), код выше был фрагмент кода я адаптированный ранее в некоторых других частях и способ сложным для этого .. ..

Теперь я просто использую hqAfterViewInit Lifecycle Hook для получения данных из службы.

Спасибо!

Смежные вопросы