Angular2：如何从父组件到子组件进行通信？ [英] Angular2 : How to communicate from parent component to child?
问题描述
我正在标记之间插入一些div。
I'm loading some of div in between tag. Its as bellow.
这是我的index.html
Here is my 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
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
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 {
}
一些html文本.... !!!!
some html text....!!!!
app-routing.module.ts
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 {}
实际上，当我点击时，它工作正常。就像它的完美启动一样，它只需单击登录按钮即可转发到新闻源并显示预期结果。但是，当我从浏览器网址访问时，它不会从home.html加载侧栏和顶部栏组件
Actually it's working fine when i'm going with clicks. like its launching perfect than on click of login button it forwards to newsfeed and shows the expected result. but when I'm going from the browser url, its not loading side bar and top bar component from the home.html
推荐答案
我不确定这是否可以解决所有问题，但我想您想先从localstorage读取值以获取最近存储的状态，并且如果您使用 BehaviorSubject 侦听器还可以获取最后一个状态如果在订阅者订阅前调用 this.subject.emit（）的状态。
I'm not sure if this fixes everything but I think you want to read the value from localstorage first to get the recently stored status and if you use BehaviorSubject listeners also get the last status if this.subject.emit() was called before a subscriber was subscribing.
@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);
}
}
这篇关于Angular2：如何从父组件到子组件进行通信？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
