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:
- Kullanıcı
- Düğmesi Gönderin tıklanması üzerine navbar-login e-posta ve şifre girerse, kimlik bilgileri kimlik bilgileri ise bir login.service
- 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");
}
}
}
Çok fazla iş yapmış gibi gözüküyor – micronyks
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
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! –