Question

这让我疯了。我有一个 Angular2应用程序，我正在尝试完成登录功能。我现在要做的就是在成功登录时使用登录用户的用户名更新 Navbar 组件模板。我试图使用EventEmitter来执行此操作，但 subscribe 部分永远不会触发。

一切建立/编译好 - 没有错误。导航栏确实会更新，但只有在硬刷新后才能更新。我正在尝试更新它而无需用户刷新

login服务

Mat rgba1 = rgba.submat(int a,int b,int c,int d);

UserService

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

导航栏模板

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

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

我还尝试过更新共享UserService上的用户对象并从nav组件引用它，但这也无效。我有一个相当强大的角度1背景，我仍然迷失为什么这不起作用。任何帮助都会非常感激。

Answer 1

正如OP评论中所讨论的那样，因为NavBar组件有func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell { let myCell = tableView.dequeueReusableCellWithIdentifier("SinglePostCell", forIndexPath: indexPath) as! PostCell //ERROR GETS REPORTED ON THE LINE BELOW myCell.usernamePosted.text = usernames[indexPath.row] myCell.messagePosted.text = messages[indexPath.row] return myCell }，所以它注入了自己的服务实例。

从NavBar组件中删除providers: [UserService]并在组件树中进一步添加它允许多个组件共享一个实例。

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

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

1 个答案: