Question

我想通过共享服务在app组件中显示和隐藏我的导航。当在组件中调用this._service.setLogin（）_service.Login时，属性将被设置为true但不会影响app组件并且绑定不起作用

这是我的应用程序组件

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

Answer 1

在组件中使用providers元属性创建服务的不同实例，

为了使其有效，您应该将 providers 加入 rootmodule ，如下所示，

（也不要忘记从@Component装饰器中删除提供者）

<强> AppModule.ts

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

从其他子组件

1 个答案: