Question

我遇到一个问题，即EventEmitter不会将值输出到父组件。这就是我的设置方式。

main.component.ts（简短版）

{{ Input::get('a') }}

auth.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);

    }

}

...

main.ejs（简短版）

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");

    }

}

auth.service.ts

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

修改我添加了export class AuthService { public authChanged: EventEmitter<string>; constructor(private _http: Http){ this.authChanged = new EventEmitter(); this.authChanged.emit("authChanged"); } }代码，我将其注入主要组件。它应该现在可以工作但不会。

Answer 1

EventEmitter发出的事件不会冒泡。如果元素已添加到router-outlet，则router-outlet只会收到事件，但不会收到包含router-outlet的元素。

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

有关共享服务，请参阅

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

Answer 2

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

Angular 2 EventEmitter

2 个答案: