Question

我试图在Angular 2/4中实现一条显示app的消息（就像gmail一样）。我需要在侧边栏上显示未读消息的计数（例如inbox.component.ts）（例如sidebar.component.ts）。

在收件箱组件中，我有一个变量（比如unSeenMsg），它保存未读邮件的值（在ngOnInit()上初始化），在点击其中一条未读邮件时，我将计数减少一{{1 }}

是否有任何方法可以通知边栏this.unSeenMsg = this.unSeenMsg-1。

的值

谈到流程，我有一个布局组件（侧边栏是这个的孩子）收件箱是另一个在以后初始化的组件

希望有人可以帮助我

Answer 1

您可以使用主题为

的变量的服务

export class notifyServic {
    private unseenCount = 0;
    unSeenMsgChange: Subject<number> = new Subject<number>();
   UpdateUnseen(count: number) {
        this.unseenCount = count;
        this.unSeenMsgChange.next(this.unseenCount);
    }
}

最初获取数据后，您可以在组件中将其设置为

this.conversation.getMessages().subscribe(resultmessages => {
    this.notifyServic.UpdateUnseen(this.resultmessages.length);
}, error => this.errorMessage = error);

然后在另一个组件中使用，

notifyServic.unseenCount;

Answer 2

阅读https://angular.io/guide/component-interaction。

现在这是一个小例子。父组件：

this.updateChild = this.unSeenMsg;

在父母的html中：

<sidebar [childCounter]=updateChild ></sidebar>

在子组件中：

@Input() childCounter: any;

并在侧栏html中显示childCounter。

Angular 2/4显示未读/未看到消息的计数

2 个答案: