服务，用于访问和更新角度 2 中的变量

Question

我有变量身份验证，我在应用程序根组件中像这样设置了 false

 import { Component ,Input} from '@angular/core' ;

 @Component({
 selector: 'app-root',
 templateUrl:'./app.component.html',
 styleUrls: ['./app.component.css']
})
export class AppComponent {
  authenticated = false;

}

我已经使用布局在角度 2 中使用了组件布线我的 HTML 代码是

        <app-nav-menu *ngIf="!authenticated"></app-nav-menu>
</div>
<div [ngClass]="{'campaign-process':authenticated}" >
    <app-side-menu *ngIf="authenticated"></app-side-menu>
<div [ngClass]="{'campaign-content':authenticated}">
    <app-upr-div-seach *ngIf="authenticated"></app-upr-div-seach>
    <router-outlet></router-outlet>

</div><!--campaign content-->

我想在子组件(登录组件(中更新此身份验证变量，有些可以制作一个服务，以便在子组件中共享和访问它 我该怎么做提前致谢

编辑THS 是组件文件

  import { Component, Input } from '@angular/core';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
 styleUrls: ['./login.component.css']
})
export class LoginComponent  {


  clickedLogin(event)
  {
  console.log('here i want to update this ');
  }
 }

Answer 1

您可以创建一个服务来更新变量，如下所示，

@Injectable()
export class sharedService {
 authenticated :boolean;
 constructor() {
}
 Initialize() {
    this.authenticated = false;
}
 Update(input:any) {
    this.authenticated = input;
 }
}

确保注入到您的模块中，稍后您可以调用 Update 和 Initalize 方法来执行所需的任何操作。

然后在组件 1.ts 中

import { sharedService } from '/services/sharedService.service';
 constructor( private sharedSer : sharedService ) {
    }
Update(){
  this.sharedSer.Update(yourvalu);
}