Angular2：如何从父组件传递给孩子？

我正在加载标签之间的一些div。它的波纹管。Angular2：如何从父组件传递给孩子？

这里是我的index.html

<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

一些HTML文本.... !!!!

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

其实它的正常工作，当我与点击去。像它的发射完美比点击登录按钮它转发给新闻源并显示预期的结果。但是当我从浏览器url，它没有加载侧栏和顶部的酒吧组件从我遇到这个问题的home.html

来源

2016-11-10 Pinank Lakhani

您需要使用共享服务与路由器https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service添加组件通信 –

我试过这个。它在点击时工作正常，但在浏览器网址时无法正常工作。 –

您需要提供更多信息。我不知道你想要完成什么，或者你尝试了什么，或者问题可能出在哪里。 –

我不知道这一切固定，但我认为你想读的localStorage值率先拿到了最近存储的状态，如果你使用BehaviorSubject听众还获得了最后的状态，如果this.subject.emit()被称为用户是以前订阅。

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

来源

2016-11-10 10:44:40

它给予运行时错误，因为以下行 private subject：BehaviorSubject = new BehaviorSubject （）; // <<<已更改提供的参数不匹配调用目标的任何签名。 –

然后，它应该可能是'new BehaviorSubject （false）;' –

上面的一个删除了运行时错误，但没有给出预期的输出。 –

。这是我如何解决这种情况;

创建观察的领域共享服务作为官方的角度文档
在您的导航栏组件解释说，从共享服务订阅值，显示导航栏
在登录和注销页面，更新的价值。由于您已经订阅了该值，订阅者自己处理此情况
创建身份验证服务。添加一个类似于这个的方法来询问你的后端，是请求验证的;

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

创建认证后卫和调用isAuthorized方法canActivate或canLoad或CanActivateChild。
在你的回调中，处理未经授权的请求。你可以将用户重定向到错误页面或删除导航栏，以及任何你想要的。

我希望它有帮助！

来源

2016-11-10 09:42:36 ulubeyn

不加载侧栏和顶部栏组件。不工作 –

如果你根据我的回答创建了一个已经尝试过的工具，我可以做出改变并提供更好的帮助。 – ulubeyn

Angular2：如何从父组件传递给孩子？

回答

相关问题