角2:事件不触发
问题描述:
我想,当我的部件从服务获取登录用户触发一个事件,因为我想显示的导航栏只有当用户登录角2:事件不触发
这里是我的app.component代码:
import { Component, OnInit, EventEmitter, Input, Output } from '@angular/core';
import { ROUTER_DIRECTIVES, Router } from '@angular/router';
import { LoginComponent } from './login.component';
import { DashboardComponent } from './dashboard.component';
import { ControlDetailComponent } from './control-detail.component';
import { PageNotFoundComponent } from './pagenotfound.component';
import { SettingsComponent } from './settings.component';
import { UserService } from '../service/user.service';
import { User } from '../object/user';
@Component({
selector: 'myApp',
templateUrl: './app/template/app.component.html',
styleUrls: ['styles.css'],
directives: [ROUTER_DIRECTIVES],
precompile: [LoginComponent, DashboardComponent, ControlDetailComponent, PageNotFoundComponent, SettingsComponent]
})
export class AppComponent {
@Input() loggedUser:User;
@Output() userChanged:EventEmitter<User> = new EventEmitter<User>();
constructor(private _userService:UserService, private _router:Router) {}
ngAfterViewInit() {
if(this._userService.isUserLogged()) {
this.userChanged.emit(this._userService.loggedUser);
}
}
switchUser(event) {
this.loggedUser = event.target.value;
console.log("event triggered");
}
}
这是其关联的模板:
<div class="all-content">
<nav (userChanged)="switchUser($event)" *ngIf="loggedUser">
<ul>
<a [routerLink]="['/dashboard']" routerLinkActive="active">Dashboard</a>
<a [routerLink]="['/settings']" routerLinkActive="active">Settings</a>
<a (click)="logout()">Logout</a>
</ul>
</nav>
有人知道为什么我的事件没有解雇?
起初我以为这个问题是*ngIf
指令这是防止该事件的触发,但即使去除,该事件不会反正解雇......通过@Output()
S排出
答
活动只能订阅在父组件上或在元素上应用的指令。 AppComponent
没有父组件,因此此方法无效。
在你的情况下,最好使用带有observables的共享服务。 https://angular.io/docs/ts/latest/cookbook/component-communication.html
答
使用Observables
和Service
,如君特Zöchbauer建议解决(谢谢!)。
下面我的解决办法:
user.service.ts
import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs/Rx';
import { Subject } from 'rxjs/Subject';
import { Control } from '../object/control';
import { User } from '../object/user';
@Injectable()
export class UserService {
private userChangedSource = new Subject<User>();
userChanged = this.userChangedSource.asObservable();
loggedUser:User;
userLoggedIn(user:User) {
this.loggedUser = user;
this.userChangedSource.next(user);
}
...
}
app.component.ts
import { Component, OnInit, EventEmitter, Input, Output } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { ROUTER_DIRECTIVES, Router } from '@angular/router';
import { LoginComponent } from './login.component';
import { DashboardComponent } from './dashboard.component';
import { ControlDetailComponent } from './control-detail.component';
import { PageNotFoundComponent } from './pagenotfound.component';
import { SettingsComponent } from './settings.component';
import { UserService } from '../service/user.service';
import { User } from '../object/user';
@Component({
selector: 'myApp',
templateUrl: './app/template/app.component.html',
styleUrls: ['styles.css'],
directives: [ROUTER_DIRECTIVES],
precompile: [LoginComponent, DashboardComponent, ControlDetailComponent, PageNotFoundComponent, SettingsComponent]
})
export class AppComponent implements OnInit {
loggedUser:User;
constructor(private _userService:UserService, private _router:Router) {
this._userService.userChanged.subscribe(user => {
this.loggedUser = user;
console.log("event triggered");
});
}
...
}
app.component.html
<div class="all-content">
<nav *ngIf="loggedUser" >
<ul>
<a [routerLink]="['/dashboard']" routerLinkActive="active">Dashboard</a>
<a [routerLink]="['/settings']" routerLinkActive="active">Settings</a>
<a (click)="logout()">Logout</a>
</ul>
</nav>
<router-outlet></router-outlet>
<br/>
</div>