Angular 2 Beta0 - 无法让事件发射器工作答案

【问题标题】：Angular 2 Beta0 - Cant get Event Emitters to workAngular 2 Beta0 - 无法让事件发射器工作
【发布时间】：2016-04-21 10:11:45
【问题描述】：

这让我发疯了。我有一个 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 });
    }
}

导航栏组件 这是我想在 Event Fire 上更新用户的地方。

@Component({
    selector: "navbar",
    directives: [<any>RouterLink, <any>NgIf],
    providers: [UserService],
    template: require('./index.html'),
    //... I've tried 'events:[], inputs:[], properties[] - No success
})

export class Navbar {

    /**
     * @type {}
     */
    user: any = {};


    constructor(private userService: UserService) {
        let self = this;

        // I expect this to log to console, but never does
        userService.userChange.subscribe((data) => {
            console.log('Caught Event');
            self.user = data.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>

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

我也尝试过更新共享 UserService 上的用户对象并从导航组件引用它，但这也不起作用。我有一个相当强的 angular 1 背景，但我仍然不知道为什么这不起作用。任何帮助将不胜感激。

【问题讨论】：

我认为您的 NavBar 组件可能正在创建自己的 UserService 实例。尝试删除providers: 行，并将其进一步添加到组件树中。您是否还在组件树的其他地方提供此服务（使用providers:）？
不错！就是这样。我确实将它作为 LoginComponent 和 NavbarComponent 的提供者。将其进一步向上移动可以捕获事件。非常感谢！
既然我已经正确触发了该事件，我只需要处理为什么它仍未在模板中更新。不过，这似乎更容易排除故障。
知道了，按预期工作 - 再次感谢。

标签： events angular

【解决方案1】：

正如 OP cmets 中所讨论的，由于 NavBar 组件具有 providers: [UserService]，因此它正在注入自己的服务实例。

从 NavBar 组件中移除 providers: [UserService] 并将其添加到组件树的更上方允许多个组件共享一个实例。

对于像 UserService 这样的东西，您可能只需要一个实例，您可以将 providers: [UserService] 放在根组件中，或者在对 bootstrap(AppComponent, [UserService]) 的调用中指定服务。

【讨论】：