角度4でログアウトしたらボタンを無効にするにはどうすればよいですか？

Question

私は親のアプリコンポーネントに、異なるボタンを持つ水平メニューを持っています。各ボタンは、子コンポーネントをメニューの下に表示します。 Logged-inのログインボタンがlogoutに変わります。私がlogoutを押すと、DOMから再びすべてのボタンを取り出す必要があります。これを達成するのに問題があります。私が使用したときの作品の並べ替え、AppComponentクラスの

のための種類。しかし、これは、レンダリングからデータベースから検索された子コンポーネントのリストを防止するという不快な副作用を持っています。さらに、ボタンが再び消えるように、コードlocation.reload()でアプリをリロードする必要があります。

、誰もがそれを正しく動作させるために、私は変更すべきかを教えてもらえます？私はエラーに

"ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'true'. Current value: 'false'." 

を得る戦略をOnPush使用していませんか

サービスを使用して、さまざまなコンポーネントが互いに通信できるようにします。

アプリコンポーネント

@Component({ 
    //changeDetection: ChangeDetectionStrategy.OnPush, 
    selector:'app-root', 
    templateUrl:'./app.component.html', 
    styleUrls:['./app.component.css'] 
}) 
export class AppComponent { 
    title: string; 
    isEnabledForUser: boolean = false; 
    isEnabledForAdmin: boolean = false; 

    //private ref: ChangeDetectorRef 
    //  this.ref.detectChanges() 

    constructor(private loginService: LoginService) { 
    this.title = "Verlofurenregistratie"; 
    loginService.loginSuccessful$.subscribe(val =>{ 
     console.log("received an new value") 
     this.isEnabledForUser = val 
     this.isEnabledForAdmin = false}) 
    loginService.adminLoginSuccessful$.subscribe(val =>{ 
     console.log("received an new value") 
     this.isEnabledForAdmin = val; 
     this.isEnabledForUser = val; 
    }) 
    loginService.logout$.subscribe(val => { 
     this.isEnabledForAdmin = val; 
     this.isEnabledForUser = val; 
    }) 
    } 
} 

appcomponent HTML

<header class="page-header"> 
    <h1>{{title}}</h1> 
    <nav> 
    <ul class="nav nav-pills"> 
     <li role="presentation" [routerLinkActive]="['active']"> 
     <a [routerLink]="['/login']">{{!(isEnabledForAdmin || isEnabledForUser) ? "Login" : "Logout"}}</a> 
     </li> 
     <li *ngIf="isEnabledForAdmin" role="presentation" [routerLinkActive]="['active']"> 
     <a [routerLink]="['/account/create']">Account aanmaken</a> 
     </li> 
     <li *ngIf="isEnabledForAdmin" role="presentation" [routerLinkActive]="['active']"> 
     <a [routerLink]="['/account/list']">Account overzicht</a> 
     </li> 
     <li *ngIf="isEnabledForUser" role="presentation" [routerLinkActive]="['active']"> 
     <a [routerLink]="['/leave/create']">Verlofuren aanvragen</a> 
     </li> 
     <li *ngIf="isEnabledForAdmin" role="presentation" [routerLinkActive]="['active']"> 
     <a [routerLink]="['/leave/list']">Verlofuren overzicht</a> 
     </li> 
     <li *ngIf="isEnabledForAdmin" role="presentation" [routerLinkActive]="['active']"> 
     <a [routerLink]="['/leave/pending']">Verlofaanvragen overzicht</a> 
     </li> 
    </ul> 
    </nav> 
</header> 
<div class="alert alert-info" role="alert">Berichten&hellip;</div> 
<router-outlet></router-outlet> 

ログイン子コンポーネント

@Component({ 
    selector: 'app-login', 
    templateUrl: './login.component.html', 
    styleUrls: ['./login.component.css'], 
    providers: [AccountService] 
}) 
export class LoginComponent implements OnInit, OnChanges { 
    title: string; 
    loggedIn: boolean = false; 
    loginForm: FormGroup; 
    loading = false; 
    error = ''; 
    constructor(private fb: FormBuilder, 
       private accountService: AccountService, 
       private router: Router, 
       private loginService: LoginService, 
       private ref: ChangeDetectorRef) { 
    this.title = "Inloggen"; 
    this.loginForm = fb.group({ 
     email: ['', [Validators.required, Validators.email]], 
     password: ['', Validators.required] 
    }); 
    } 

    ngOnInit(): void{ 
    console.log("I'm in ngOnChanges right now..") 
    if(localStorage.getItem("account") !== null){ 
     console.log("loggedIn is true") 
     localStorage.clear() 
     // this.ref.detectChanges() 
     //this.loginService.onLogout() 
     this.loginService.isLoginSuccessful(false, "user"); 
     //location.reload(false) 
    } 
    } 

    ngOnChanges(): void { 

    } 

    onSubmit() { 
    const formModel = this.loginForm.value; 
    this.accountService.authenticate(formModel.email, formModel.password).then(account => 
    { 
     if (account !== undefined && account.enabled) { 
      localStorage.setItem("account",JSON.stringify(account)) 
      this.loggedIn = true; 
     if(account.admin) { 
     this.loginService.isLoginSuccessful(true, "admin"); 
     this.router.navigate(["leave/pending"]) 
     } 
     else { 
     this.loginService.isLoginSuccessful(true, "user"); 
     this.router.navigate(["leave/create"]) 
     } 
     } 
    }); 
    } 
} 

ログインHTML

： 以下は私のコードです

があなたのappComponent.htmlであなたに

Answer 1

ありがとう、あなたがこれを行うことができます：

<header class="page-header"> 
    <h1>{{title}}</h1> 
    <nav> 
    <ul class="nav nav-pills"> 
     <li role="presentation" [routerLinkActive]="['active']"> 
     <a *ngIf="!(isEnabledForAdmin || isEnabledForUser)" [routerLink]="['/login']">Login</a> 
     <a *ngIf="isEnabledForAdmin || isEnabledForUser" [routerLink]="['/login']">Logout</a> 
     </li> 
     <li *ngIf="isEnabledForAdmin" role="presentation" [routerLinkActive]="['active']"> 
     <a [routerLink]="['/account/create']">Account aanmaken</a> 
     </li> 
     <li *ngIf="isEnabledForAdmin" role="presentation" [routerLinkActive]="['active']"> 
     <a [routerLink]="['/account/list']">Account overzicht</a> 
     </li> 
     <li *ngIf="isEnabledForUser" role="presentation" [routerLinkActive]="['active']"> 
     <a [routerLink]="['/leave/create']">Verlofuren aanvragen</a> 
     </li> 
     <li *ngIf="isEnabledForAdmin" role="presentation" [routerLinkActive]="['active']"> 
     <a [routerLink]="['/leave/list']">Verlofuren overzicht</a> 
     </li> 
     <li *ngIf="isEnabledForAdmin" role="presentation" [routerLinkActive]="['active']"> 
     <a [routerLink]="['/leave/pending']">Verlofaanvragen overzicht</a> 
     </li> 
    </ul> 
    </nav> 
</header> 
<div class="alert alert-info" role="alert">Berichten&hellip;</div> 
<router-outlet></router-outlet>