Question

我有一个导航组件，我希望根据用户是否登录来显示或隐藏。为此，我添加了一个localStorage来确认用户已登录。但是，我的导航组件只在OnInit期间听取此消息。

我如何让一个组件听取另一个组件的更改？在这种情况下，导航会响应登录组件的功能onlogin。

navigation.component.ts

export class NavigationComponent implements OnInit {
private navshow: boolean;
if (localStorage.getItem('confirmo')){ this.navshow = true; }
}

signin.component.ts

export class SigninClass {
onlogin(){
localStorage.setItem('confirmo', 'verdad');  }
}

Answer 1

看看以下链接。您可以使用可观察的服务和共享服务来实现这一目标。

Angular.io Component Interaction using a Service

Answer 2

您可以跟踪更改内容或使用事件方法来“喊”＆＃39;发生了变化。

所以创建一个单例服务。有发射方法。选择其他组件中的服务并订阅它。

即

服务

export class MessageInformation{
    constructor(public name: string, public details: string, public extra?: any[]){

    }
}

@Injectable()
export class MessagingService {
public parentFrameChangeEvent: EventEmitter<MessageInformation>;

constructor(){
    this.parentFrameChangeEvent = new EventEmitter<MessageInformation>();
}

public sendMessage(message: MessageInformation): void{
    this.parentFrameChangeEvent.emit(message);
}

}

然后注入你的调用构造函数并按原样使用

  var reloadMessage: MessageInformation = { name: "reload", details: "forcereload", extra: tabIdArray };
        this.messaging.sendMessage(reloadMessage);

（请注意，您不需要MessageInformation，它只是我用来传递额外信息的内部类）

然后在任何目标组件中注入相同的单例服务并订阅

this.messenger.parentFrameChangeEvent.subscribe(message => this.reloadData(message));

在该方法中，您可以完成登录事件

的所有工作

Angular 2让组件互相倾听

2 个答案: