Angular：变化检测

Question

我正在开发一个应用程序，我在导航栏上定义了许多选项卡。其中一些是隐藏的。我有一个登录选项卡，在用户登录后我想让它消失并显示注销选项卡。我已经正确地提出了我的逻辑，但是我遇到了问题。所有这些选项卡都是路由，而导航栏组件不是。当我启动应用程序时，它只会呈现一次。我在我的登录组件中使用了服务并将该数据传递给我的导航栏组件，但是，尽管用户登录后，导航栏并没有自行更新新选项卡（注销）。我不得不说单击一个按钮以再次调用导航栏组件的 ngOnInit() 方法。这是我的代码：

navbar.component.html

<div class="collapse navbar-collapse" id="navbarSupportedContent" >
<ul class="navbar-nav ml-auto">
  <li class="nav-item" routerLinkActive = "active" [routerLinkActiveOptions] = "{exact: true}">
    <a class="nav-link" routerLink = "/">Home</a>
  </li>
  <li class="nav-item" routerLinkActive = "active">
    <a class="nav-link" routerLink = "/findcourse">Find Courses</a>
  </li>
  <li class="nav-item" routerLinkActive = "active">
    <a class="nav-link" routerLink = "/feedback">Feedback</a>
  </li>
  <li class="nav-item" routerLinkActive = "active">
    <a class="nav-link" routerLink = "/register">Register</a>
  </li>
  <li class="nav-item" routerLinkActive = "active" *ngIf = "loggedIn">
    <a class="nav-link" routerLink = "/login">Login</a>
  </li>
  <li class="nav-item" routerLinkActive = "active" *ngIf = "loggedOut">
    <a class="nav-link" routerLink = "/logout">Log out</a>
  </li>
  <button type="button" name="button" class = "btn btn-outline-info" (click) = "ngOnInit()">Check</button>
</ul>
</div>

navbar.component.ts

ngOnInit(): void         //I want to call this on its own not only at the time of rendering but every time user logs in
{
if(this.login.isAuthenticated() == true)
{
  this.loggedOut = true;
  this.loggedIn = false;
}
else if(this.login.isAuthenticated() == false)
{
  this.loggedOut = false;
  this.loggedIn = true;
}
}

login.component.ts

logIn(form: NgForm)
{
 this.http.post('http://localhost:3000/login', form.value, {responseType: "text"})
 .subscribe(responseData => {
  if(responseData == 'Successfully logged in')
  {
    this.logInSuccess = true;
    this.showlogInAlert();
    this.auth.checkAuthentication(true);
  }
  else if(responseData == 'User login failed')
  {
    this.logInFailure = true;
    this.auth.checkAuthentication(false);
  }
 }
,error =>{
this.serverError = true;
this.showserverAlert();
});

form.reset();
}

login.service.ts

 export class Login
{
 logInSuccess: boolean = false;

 checkAuthentication(check : boolean)
{
 if(check === true)
 {
  this.logInSuccess = true;
 }
 else
 {
  this.logInSuccess = false;
 }
}

isAuthenticated()
{
 return this.logInSuccess;
}
}

如何自行重新渲染导航栏？我不知道该怎么做？有没有办法让 Angular 自己检查导航栏中的更改检测？

Answer 1

快速解决方法是直接在您的 html 中使用登录服务 isAuthenticated 值：

  <li class="nav-item" routerLinkActive = "active" *ngIf = "!login.isAuthenticated()">
    <a class="nav-link" routerLink = "/login">Login</a>
  </li>
  <li class="nav-item" routerLinkActive = "active" *ngIf = "login.isAuthenticated()">
    <a class="nav-link" routerLink = "/logout">Log out</a>
  </li>

它会在更新时从服务中获取最新值。

在更改检测方面更有效的是将值公开为可观察的并订阅组件中的更改。 回复this question 的示例。