1

Bir navbar-login (navbar giriş formu) ve bir sayfa giriş (bir oturum açma formuna sahip bir sayfa). Navbar-login-formu ve sayfa-login-formu, bir servis yoluyla iki yönlü olarak bağlanır (aşağıdaki birinci codebit'e bakınız).Veri iletimini tamamladıktan sonra bileşene veri iletme

İstediğim şu akışıdır:

  1. Kullanıcı
  2. Düğmesi Gönderin tıklanması üzerine navbar-login e-posta ve şifre girerse, kimlik bilgileri kimlik bilgileri ise bir login.service
  3. gönderilir kimlik bilgileriyle giriş-sayfaya yanlış, servis yolları

görüntülenen hizmetiyle çalışıyor bağlayıcı-iki yönlü sayfa giriş bir ise görüntülendim. Ancak görüntülenmediyse ve kimlik bilgilerini girip düğmeye basarsa, yalnızca sayfa girişine yönlendirir, ancak kimlik bilgilerini geçmez.

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; 
    } 
} 

budur: Ben navbar-giriş ve sayfa giriş birbirlerine (karşısında iki yönlü bağlayıcı "ilgisiz" bileşenleri) ile iletişim için aşağıdaki servisini kullanıyorum

navbar bileşeni pass2page HTML girişlerine bir keyup olayı ile bağladım:

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); 
    } 
} 

Ve bu sayfa login bileşeninde dinleyicidir:

Ve nihayet 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

Çok fazla iş yapmış gibi gözüküyor – micronyks

+0

Yalnızca tek paylaşımlı servis istediğiniz şeyi yapabilir. Verilen verilerle elde etmeye çalıştığınız şeyi anlamak bile oldukça zor. Paylaşılan nesne ile tek paylaşımlı hizmeti kullanmanız gerekiyordu. – micronyks

+0

evet ... iyi bir gece uykusundan sonra bunu anladım :), yukarıdaki kod bazı parçalarda daha önce uyarlanmış bir pasajdı .... Şimdi sadece veriyi almak için ngAfterViewInit Lifecycle Hook'u kullanıyorum hizmet. Teşekkürler! –

cevap

0

iyi geceler :) anladım, kod yukarıda bunun için karmaşık bir i diğer bazı bölgelerinde daha önce adapte pasajı ve yoluydu uyku sonra .. ..

Artık verileri servisten almak için ngAfterViewInit Lifecycle Hook'u kullanıyorum.

Teşekkürler!