Angular 2 EventEmitter

Question

我有一个问题，即EventEmitter不会将值输出到父组件。 这是我如何设置。

main.component.ts（简短版）

...     

@Component({
selector: 'my-app',
templateUrl: '/app/views/main.ejs',
directives: [ROUTER_DIRECTIVES],
providers:[AuthService],
inputs:['userLoggedIn']
})

@RouteConfig([
{path:'/logout', name: 'Logout', component: AuthComponent},

])

export class AppComponent implements OnInit, CanReuse{  

    constructor(private _auth_service: AuthService){

         this._auth_service.authChanged.subscribe(data=>this.authChangedHandler(data));

    }

    public authChangedHandler($event){

        alert($event);

    }

}

...

auth.component.ts（简短版）

export class AuthComponent implements OnInit, CanReuse{

public loggedIn = false;

public user = {};

@Output()
authChanged: EventEmitter<string>;

public selectedTab = "/login";

    constructor(private _router: Router, private _location:Location,private _http: Http, private _auth_service: AuthService){

        this.authChanged = new EventEmitter();

        this.authChanged.emit("authChanged");

    }

}

main.ejs（短版）

<nav (authChanged)="authChangedHandler($event)"></nav>
<router-outlet></router-outlet>

auth.service.ts

export class AuthService {

public authChanged: EventEmitter<string>;

constructor(private _http: Http){

    this.authChanged = new EventEmitter();
    this.authChanged.emit("authChanged");

    }

}

编辑：我添加了AuthService代码，我注入主要组件。 它现在应该工作，但不是。

Answer 1

EventEmitter发出的EventEmitter不会冒泡。 如果元素被添加到router-outlet只有router-outlet接收事件而不是包含router-outlet的元件。

您可以使用共享服务在父元素和子元素之间进行通信。

对于共享服务请参阅

• https://github.com/escardin/angular2-community-faq/blob/master/services.md#how-do-i-communicate-between-components-using-a-shared-service
• Angular中的全球事件2

如果在父组件的providers: []列表中注册共享服务，则仅在父元素及其所有后代之间共享服务。 如果只将它添加到bootstrap(MyApp, [ ..., SharedService])则整个应用程序共享一个实例。

Answer 2

实际上， nav不是AuthComponent的父组件。 后者涉及路由（参见router-outlet ）。 这就是为什么您无法在HTML中的nav元素上接收已注册表达式的事件。