在angular 4中注销后如何禁用按钮？

我有一个父应用程序组件，它有一个带有不同按钮的水平菜单。每个按钮都会使子组件显示在菜单下。当登录时，登录按钮变为注销。当我按下注销按钮时，应该会再次将所有按钮从DOM中移除。我很难实现这一点。当我使用

changeDetection: ChangeDetectionStrategy.OnPush

对于AppComponent类。但是，这会产生令人不快的副作用，即阻止子组件中的任何列表 从数据库中从渲染中检索。此外，我必须用代码

location.reload（）

重新加载应用程序，按钮才能再次消失

当我不使用OnPush策略时，我会得到错误

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

有人能告诉我应该做些什么来让它正常工作吗

我使用服务使不同的组件能够相互通信。 下面是我的代码：

应用程序组件

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

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

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>

登录HTML

<h2>{{title}}</h2>
<form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
  <div class="form-group">
    <label for="email">E-mailadres</label>
    <input type="email" id="email" class="form-control"
           placeholder="naam@mail.com"
           formControlName="email">
  </div>
  <div class="form-group">
    <label for="password">Wachtwoord</label>
    <input type="password" id="password" class="form-control"
           formControlName="password">
  </div>
  <div class="form-group">
    <button type="submit" class="btn btn-default">Inloggen</button>
  </div>
</form>

{{title}
电子邮件地址
瓦赫特伍德
因洛根

---

谢谢

在appComponent.html中，您可以执行以下操作：

<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>

{{title}}


登录
注销







贝里赫滕和赫利普；

您可以为登录和注销创建两个单独的按钮，并在其上使用*ngIf。这样，根据您的条件，一次只显示一个按钮。请记住，如果您使用ngIf，则不必告诉Angular以检测更改。它会根据ngIf条件动态更改视图，注销后如何删除按钮？在这种情况下，按钮不应可见。这没有帮助，注销后也应移除按钮。