Angular2: Ebeveyn bileşeninden çocuğa nasıl iletişim kurabilirim?

Etiket arasında bir miktar div yüklüyorum. Onun feryatı gibi. İşte Angular2: Ebeveyn bileşeninden çocuğa nasıl iletişim kurabilirim?

benim index.html olan

<html> 
<script> 
System.import('app').catch(function(err){ console.error(err); }); 
</script> 
</head> 

<!-- 3. Display the application --> 

<body> 
<my-app>Loading...</my-app> 
</body> 
</html>

app.module.ts

@NgModule({ 
imports: [ 
    BrowserModule, 
    FormsModule, 
    AppRoutingModule 
], 
declarations: [ 
    AppComponent, 
    LoginComponent, 
    HomeComponent, 
    NewsfeedComponent, 
    TopBarComponent, 
    SideMenuComponent 
], 
providers : [ 
    AuthGaurd 
], 
bootstrap: [ 
    AppComponent 
] }) 
export class AppComponent {}

home.component.ts

@Component({ 
    selector: 'home', 
    moduleId: module.id, 
    templateUrl: 'home.component.html', 
    providers : [ 
     LoginService 
    ] 
}) 

export class HomeComponent implements OnInit{ 
isLoggedin : boolean; 
constructor (private loginService : LoginService) { } 
ngOnInit(): void { 
    this.loginService.getLogged().subscribe((isLoggedIn: boolean) => { 
     this.isLoggedin = isLoggedIn; 
    }); } 
} 

home.component.html 

<side-menu *ngIf='isLoggedin'></side-menu> 
<top-bar *ngIf='isLoggedin'></top-bar> 
<router-outlet></router-outlet>

auth.gaurd.ts

@Injectable() 
export class AuthGaurd implements CanActivate{ 
    constructor(private router : Router) { 
    } 
    canActivate(){ 
     if (localStorage.getItem('isLogin')){ 
      return true; 
     } 
     this.router.navigate(['/login']) 
     return false; 
    } 
}

login.service.ts

@Injectable() 
export class LoginService { 
    private subject: Subject<boolean> = new Subject<boolean>(); 
    constructor(private router : Router) { 
    } 
    login(){ 
     this.setLogged(true); 
     localStorage.setItem("isLogin","true"); 
     this.router.navigate(['/news-feed']); 
    } 
    logout(){ 
     this.setLogged(false); 
     localStorage.removeItem("isLogin"); 
     this.router.navigate(['/login']); 
    } 
    getLogged(): Observable<boolean> { 
     return this.subject.asObservable(); 
    } 
    setLogged(val : boolean): void { 
     this.subject.next(val); 
    } 
}

login.component.ts

@Component({ 
    selector: 'login', 
    moduleId: module.id, 
    templateUrl: 'login.component.html' 
}) 

export class LoginComponent { 
    constructor (private loginService : LoginService) { 
    } 

    login(){ 
     this.loginService.login() 
    } 
}

login.component.html

<input type="number” #mobileNumber /> 
<input type="password" #password /> 
<input type="button" (click)="login()">

newsfeed.component.ts

@Component({ 
    selector: 'newsfeed', 
    moduleId: module.id, 
    templateUrl: 'newsfeed.component.html', 
}) 

export class NewsfeedComponent { 

}

newsfeed.component.html

bazı html metni .... !!!!

app-routing.module.ts

@NgModule({ 
imports: [ 
    RouterModule.forRoot([ 
     { 
      path : 'login', 
      component : LoginComponent 
     }, 
     { 
      path : 'news-feed', 
      component : NewsfeedComponent, 
      canActivate : [AuthGaurd] 
     }, 
     { 
      path : '', 
      redirectTo : '/news-feed', 
      pathMatch : 'full' 
     } 
     { 
      path: '**', 
      component: LoginComponent 
     } 
    ]) 
], 
exports: [ 
    RouterModule 
] 
}) 
export class AppRoutingModule {}

i tıklama ile gidiyorum zaman Aslında düzgün şekilde çalışıyorsa. açılışını tıklamaktan daha iyi bir şekilde yayınlanmaya başladığı gibi, haber bültenine yönlendirir ve beklenen sonucu gösterir. ancak tarayıcı url'sinden, yükleme kenar çubuğunu ve üst çubuk bileşenini home.html

kaynak

2016-11-10 Pinank Lakhani

Sen yönlendirici https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service tarafından eklenen bileşenler ile iletişim kurmak için ortak bir hizmeti kullanmak gerekir –

Bunu denedim. Tıklama için iyi çalışıyor, ancak tarayıcı URL'sini kullanırken işe yaramıyor. –

Daha fazla bilgi vermeniz gerekiyor. Ne yapmaya çalıştığını, ne denediğini ya da sorunun nerede yarayacağını bilmiyorum. –

emin değilim ama öncelikle son zamanlarda saklanan durumu almak için localStorage değeri okumak istiyorum düşünüyorum ve BehaviorSubject dinleyicileri kullanırsanız da son durumunu almak abone.

@Injectable() 
export class LoginService { 
    //private subject: Subject<boolean> = new Subject<boolean>(false); 
    private subject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(); // <<< changed 
    constructor(private router : Router) { 
     this.sublect.next(logalStorage.getItem('isLogin')); // <<< added 
    } 
    login(){ 
     this.setLogged(true); 
     localStorage.setItem("isLogin","true"); 
     this.router.navigate(['/news-feed']); 
    } 
    logout(){ 
     this.setLogged(false); 
     localStorage.removeItem("isLogin"); 
     this.router.navigate(['/login']); 
    } 
    getLogged(): Observable<boolean> { 
     return this.subject.asObservable(); 
    } 
    setLogged(val : boolean): void { 
     this.subject.next(val); 
    } 
}

kaynak

2016-11-10 10:44:40

Aşağıdaki özel satır özel konu nedeniyle çalışma zamanı hatası veriyor: BehaviorSubject // <<< değiştirildi Ürünle verilen parametreler, arama hedefinin imzasıyla eşleşmiyor. –

O zaman muhtemelen 'Yeni BehaviorSubject (false) olmalıdır; ' –

Yukarıdaki, çalışma zamanı hatasını kaldırır ancak beklenen çıktıyı vermez. –

'dan aldığımda, bu sorunla karşılaştım. İşte bu durumu nasıl çözüyorum;

resmi açısal belgelerde navigasyon çubuğu bileşeninde
açıklandığı gibi, gözlemlenebilir alanları ile paylaşılan bir hizmet oluşturma giriş ve çıkış sayfaları, güncelleme değeri olarak gezinti çubuğu
görüntülemek için paylaşılan hizmetten değere abone olun. Değeri zaten abone olduğunuzdan, abone bu durumu kendi başına ele alır.

Bir kimlik doğrulama hizmeti oluşturun. Arka ucunuza sormak için buna benzer bir yöntem ekleyin;

//method parameters depend on what you want 
isAuthorized(url: string, errorCallback: (any) => void) { 
     let body = JSON.stringify(url) 
     return this.http.post('account/isauthorized', body) 
      .map((response: Response) => { 
       //update value to display navigation bar if user is authenticated 
       yourSharedService.observableField.next(true); 
       return true; 
      }) 
      .catch((response: Response) => { 
       errorCallback(response.status); 
       return Observable.of(false); 
      }); 
    }

canActivate

canLoad

CanActivateChild

isAuthorized

Geri arama sırasında, yetkisiz istekleri işlemek. Kullanıcıyı hata sayfalarına yönlendirebilir veya gezinti çubuğunu ve istediğiniz her şeyi kaldırabilirsiniz.

Umarım yardımcı olur! Bir abone önce this.subject.emit() denirdi eğer bu şeyi düzeltir eğer

kaynak

2016-11-10 09:42:36 ulubeyn

'dan yükleme tarafı çubuğu ve üst çubuk bileşeni çalışmıyor. Çalışmıyor –

Cevabım gereği daha önce denediğin şeye sahip bir plunker oluşturursanız, değişiklik yapabilir ve daha iyi yardımcı olabilirim. – ulubeyn

Angular2: Ebeveyn bileşeninden çocuğa nasıl iletişim kurabilirim?

cevap

İlgili konular