3
对于Angular 2，我仍然很新，希望你们能帮助我。Angular 2 - 内容无法在路由器插座中加载
我有一个相当简单的应用程序，有一个登录页面，成功登录后，用户被定向到一个带有sidemenu的页面。登录屏幕没有这个侧边菜单。当用户注销时，他将被重定向到登录页面。
问题是，登录后sidemenu变得可见，但其他内容仅在刷新后才可见。只有在刷新内容（登录页面）后，注销后页面才为空，注销时也是如此。我可能做错了什么，但即使看了其他问题，我也弄不清楚。
这里是我的路由：
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ProfileComponent } from './profile-component/profile-component.component'
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
import { LoginComponent } from './login/login.component';
import { LoggedInGuard } from './logged-in/logged-in.guard';
const appRoutes: Routes = [
{path: 'profile', component: ProfileComponent, canActivate: [LoggedInGuard]},
{path: 'login', component: LoginComponent},
{path: '', component: LoginComponent},
{path: '**', component: PageNotFoundComponent},
];
@NgModule({
imports: [
RouterModule.forRoot(appRoutes)
],
exports: [
RouterModule
]
})
export class AppRoutingModule {
}
的LoginComponent：
import {Component, OnInit} from '@angular/core';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
import {LoginService} from '../login-service/login-service.service';
import {Router} from '@angular/router';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.scss'],
providers: [ LoginService ]
})
export class LoginComponent implements OnInit {
loginForm: FormGroup;
error: String;
constructor(private formBuilder: FormBuilder,
private loginService: LoginService,
private router: Router) {
}
ngOnInit() {
if (this.loginService.isLoggedIn()) {
this.router.navigate(['/profile']);
}
this.loginForm = this.formBuilder.group({
username: ['', Validators.required],
password: ['', Validators.required]
});
}
login(): void {
let self = this;
this.loginService.login(this.loginForm.value.username, this.loginForm.value.password).subscribe(function (result) {
if (result) {
self.router.navigate(['/profile']);
}
}, function (error) {
self.error = 'Invalid';
});
}
}
的AppComponent HTML看起来像这样：
<md-toolbar color="primary" *ngIf="isLoggedIn()">
<span>Sporter volgsysteem</span>
</md-toolbar>
<md-sidenav-layout *ngIf="isLoggedIn()">
<md-sidenav #start mode="side" [opened]="true">
<a routerLink="/add" routerLinkActive="active" md-button color="primary" disabled="false"><md-icon class="icon">add</md-icon><span class="nav-item">Toevoegen</span></a>
<a routerLink="/compare" routerLinkActive="active" md-button color="primary"><md-icon class="icon">swap_horiz</md-icon><span class="nav-item">Vergelijken</span></a>
<a routerLink="/search" routerLinkActive="active" md-button color="primary"><md-icon class="icon">search</md-icon><span class="nav-item">Zoeken</span></a>
<a routerLink="/profile" routerLinkActive="active" md-button color="primary"><md-icon class="icon">account_box</md-icon><span class="nav-item">Profiel</span></a>
<a routerLink="/feedback" routerLinkActive="active" md-button color="primary"><md-icon class="icon">feedback</md-icon><span class="nav-item">Feedback</span></a>
<a routerLink="/faq" routerLinkActive="active" md-button color="primary"><md-icon class="icon">info</md-icon><span class="nav-item">FAQ</span></a>
<div class="spacer"></div>
<a md-button color="primary" routerLink="/login" (click)="logout()"><md-icon class="icon">exit_to_app</md-icon><span class="nav-item">Uitloggen</span></a>
</md-sidenav>
<router-outlet></router-outlet>
</md-sidenav-layout>
<router-outlet *ngIf="!isLoggedIn()"></router-outlet>
AppComponent：
import {Component} from '@angular/core';
import {LoginService} from "./login-service/login-service.service";
import {Router } from '@angular/router'
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
providers: []
})
export class AppComponent {
constructor(private loginService : LoginService,
private router: Router) {
}
logout() {
this.loginService.logout();
this.router.navigate(['/login']);
}
isLoggedIn() {
return this.loginService.isLoggedIn();
}
}
那么为什么登录后不显示ProfileComponent的内容，为什么登出后登录页面不显示，但是刷新时都显示？
更新
大多数建议，这是由于多个无名router-outlet其实如此，以验证我删除一个出口，并显示sidemenu布局所有的时间。当然为了测试目的。这并没有解决问题，它给了我相同的行为：配置文件内容只在刷新后加载。
更新2 我猜这是关系到使用*ngIf显示router-outlet
你的AppComponent有2个，它们都没有'name =“xxx”'。每个路由只能有一个未命名的路由器出口。 –
@GünterZöchbauer尽管'* ngIf'只有1个可见？我在控制台中没有错误。 –
啊，对不起，我错过了第一个'* ngIf'。 –