3
私はまだAngular 2の新機能を持っています。角2 - ルータのコンセントに読み込まれていないコンテンツ
私は非常にシンプルなアプリケーションを持っています。ログインページがあります。ログインに成功すると、ユーザーはサイドメニュー付きのページに移動します。ログイン画面にこの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の内容が表示されないのはなぜですか。ログアウト後にログインページが表示されないのはなぜですか？
更新
大半は、それはので、私は店の1を削除したことを確認し、sidemenuレイアウトのすべての時間を表示するため、複数の無名のrouter-outlet sであることが示唆されました。もちろん、テスト目的のために。それは問題を解決しません、それは私に同じ動作を与える：プロファイルの内容は、更新後にのみ読み込まれます。
アップデート2 私はこれは、私は上記のコメントが示唆するような問題は、二重ルータ・アウトレットであると考えていrouter-outlet
'AppComponent'は2つの' 'を持ち、どちらも 'name =" xxx "'を持っていません。ルートごとに名前の付いていないルータコンセントは1つだけ許可されます。 –
@GünterZöchbauer '* ngIf'のために1つしか表示されませんが？私はコンソールにエラーは表示されません。 –
ああ、申し訳ありませんが、私は最初の '* ngIf'を見逃しました。 –