angularjs – Angular2：如何从父组件到子组件进行通信？

发布时间：2020-12-17 17:35:54 所属栏目：安全来源：网络整理

导读：我在标签之间加载了一些div.它如吼叫. 这是我的index.html htmlscriptSystem.import('app').catch(function(err){ console.error(err); });/script/head!-- 3. Display the application --bodymy-appLoading.../my-app/body/html app.module.ts @NgModule({i

我在标签之间加载了一些div.它如吼叫.

这是我的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;
    }
}

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

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

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

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

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

newsfeed.component.ts

@Component({
    selector: 'newsfeed',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 {}

实际上,当我点击时,它工作正常.就像它的发布完美而不是点击登录按钮它转发到新闻源并显示预期的结果.但是当我从浏览器网址开始时,它不会从home.html加载侧栏和顶栏组件

解决方法

我不确定这是否修复了所有内容,但我认为您希望首先从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);
    }
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!