Блог

я хочу показывать и скрывать свои навигационные системы в компоненте приложения с помощью общей службы. при вызове this._service.setLogin() в компоненте _service.setLogin().Войдите в систему, для свойства будет установлено значение true, но оно не повлияет на компонент приложения, и привязка не сработает

это мой компонент приложения

 @Component({
selector: 'pm-app',  
templateUrl: "/app/app.component.html",providers:AuthenticationService]      
 ,providers: [AuthenticationService]
  })
 constructor(private _service: AuthenticationService) {}

<nav class="off-canvas-navigation">

            <li *ngIf='!_service.Login'><a [routerLink]="['/login']">login</a></li>
            <li *ngIf='_service.Login'><a [routerLink]="['/logout']">logOut</a></li>
        </nav>
        <div id="page-content">
            <router-outlet></router-outlet>
        </div>
</nav>
  

и мой общий общий сервис приведен ниже

   @Injectable()
    export class AuthenticationService {
    Login: boolean;

    setLogin(){this.login=true;}
  

и мой другой компонент находится здесь

    @Component({ 
   templateUrl: "app/home/login-form.component.html",
  providers: [AuthenticationService]
   })
  export class LoginFormComponent implements OnInit {
   constructor(private _service: AuthenticationService) {}
   login() {this._service.setLogin();}
}
  

использование providers мета-свойства в компоненте создает другой экземпляр вашего сервиса,

итак, чтобы это заработало, вы должны поместить providers в свой rootmodule , как показано ниже,

(также не забудьте удалить поставщиков из @Component decorator)

AppModule.ts

 @NgModule({
   ...
   providers: [AuthenticationService]   //<<## add here in NgModule decorator
})