我在标签之间加载了一些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;
}
}
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',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',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);
}
}
