Events 角度2 Beta0-无法使事件发射器工作

这让我快发疯了。我有一个Angular2应用程序，我正试图完成登录功能。此时，我所要做的就是在用户成功登录时使用登录的用户名更新Navbar组件模板。我正试图使用EventEmitter来实现这一点，但subscribe部分从未启动

所有构建/编译操作正常-无错误。导航栏也会更新，但只能在硬刷新后更新。我正在尝试在用户不需要刷新的情况下更新它

登录服务

@Injectable()
export class LoginService {

   constructor(..., private userService: UserService) {
      //
   }

   postLogin(f: ControlGroup) {
      // Submits Login Form Etc.
      // Calls UserService to 'Set User'
      this.userService.setUser(user);
   }
}

@Injectable()
export class UserService {

    // My EventEmitter Here (I've tried without @Ouput() too)
    @Output() userChange: EventEmitter<any> = new EventEmitter();

    constructor() {
        //
    }

    setUser(user: any) {
        // Do some stuff with user
        this.localStorage.setObject('user', user);

        // Emit User Change Event (This logs to console OK)
        console.log('Emitting User');
        this.userChange.emit({ user: user });
    }
}

<!-- User Authed Menu -->
<li *ngIf="loggedIn" class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" (click)="userDrop = !userDrop" href="#" role="button">
        {{ user.username }}
    </a>
    <div class="dropdown-menu" [hidden]="!userDrop">
        <a class="dropdown-item" [routerLink]="['./Login']" (click)="userDrop = !userDrop">Logout</a>
    </div>
</li>

用户服务

@Injectable()
export class LoginService {

   constructor(..., private userService: UserService) {
      //
   }

   postLogin(f: ControlGroup) {
      // Submits Login Form Etc.
      // Calls UserService to 'Set User'
      this.userService.setUser(user);
   }
}

@Injectable()
export class UserService {

    // My EventEmitter Here (I've tried without @Ouput() too)
    @Output() userChange: EventEmitter<any> = new EventEmitter();

    constructor() {
        //
    }

    setUser(user: any) {
        // Do some stuff with user
        this.localStorage.setObject('user', user);

        // Emit User Change Event (This logs to console OK)
        console.log('Emitting User');
        this.userChange.emit({ user: user });
    }
}

<!-- User Authed Menu -->
<li *ngIf="loggedIn" class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" (click)="userDrop = !userDrop" href="#" role="button">
        {{ user.username }}
    </a>
    <div class="dropdown-menu" [hidden]="!userDrop">
        <a class="dropdown-item" [routerLink]="['./Login']" (click)="userDrop = !userDrop">Logout</a>
    </div>
</li>

@Injectable（）
导出类用户服务{
//这里是我的EventEmitter（我也尝试过不使用@Ouput（））
@Output（）userChange:EventEmitter
注销

NavbarComponent也在AppComponent下，不确定这是否重要

---

我也尝试过在shared UserService上更新一个用户对象并从nav组件引用它，但这也不起作用。我有一个相当强的angular 1背景，我仍然不明白为什么这不起作用。如果有任何帮助，我将不胜感激。

如OP评论中所述，因为NavBar组件

提供者：[UserService]

，它正在注入自己的服务实例

从NavBar组件中删除

提供者：[UserService]

，并将其进一步添加到组件树中，允许多个组件共享一个实例

---

对于像UserService这样的东西，您可能只需要一个实例，您可以将

providers:[UserService]

放在根组件中，或者在调用

bootstrap（AppComponent，[UserService]）

时指定服务，如OP注释中所述，因为导航栏组件具有

providers:[UserService]

，它正在注入自己的服务实例

从NavBar组件中删除

提供者：[UserService]

，并将其进一步添加到组件树中，允许多个组件共享一个实例

---

对于像UserService这样的东西，您可能只需要一个实例，您可以将

提供者：[UserService]

放在根组件中，或者在调用

引导时指定服务（AppComponent，[UserService]）

我认为您的NavBar组件可能正在创建自己的UserService实例。请尝试删除

提供程序：

行，并将其添加到组件树的更上层。您是否也提供此服务（使用

提供程序：

）在组件树中的其他位置？很好！就是这样。我确实将它作为LoginComponent和NavbarComponent的提供者。将它进一步向上移动可以捕获事件。非常感谢！现在我已经正确触发了该事件，我只需要处理为什么它仍然没有在模板中更新。这似乎更容易不过要排除故障。明白了，按预期工作-再次感谢。我认为您的NavBar组件可能正在创建自己的UserService实例。请尝试删除

提供程序：

行，并将其添加到组件树的更高位置。您是否也提供此服务（使用

提供程序：

）在组件树中的其他位置？很好！就是这样。我确实将它作为LoginComponent和NavbarComponent的提供者。将它进一步向上移动可以捕获事件。非常感谢！现在我已经正确触发了该事件，我只需要处理为什么它仍然没有在模板中更新。这似乎更容易但要排除故障。明白了，按预期工作-再次感谢。