Question

加载所有页面的组件如下：

<app-header></app-header>
<div>

  <router-outlet></router-outlet>
</div>
<app-footer></app-footer>

我需要在替换路由器插座的任何组件中触发消息服务的任何操作的标题组件下的标题栏下方显示一些警报。我有一个通用的messageService，可跨组件使用，也已作为提供程序添加到app.module.ts

我的问题是，标头是静态的，这意味着除页面加载外没有其他事件发生。因此，即使触发messageService，即使将订阅放置在构造函数或onInit中，也绝对不会发生订阅。我不确定如何从标头组件中的订阅中获取价值。请帮忙。

Answer 1

您可以从标头组件的ngOnInit订阅public class MyAdapter extends RecyclerView.Adapter<ViewHolder> { @Override public void onBindViewHolder(@NonNull final ViewHolder myViewHolder, int position) { onRecyclerViewScrolled() { if (!isVisible(myViewHolder.myView)) { //do something } } } } public static boolean isVisible(final View view) { if (view == null) { return false; } if (!view.isShown()) { return false; } final Rect actualPosition = new Rect(); view.getGlobalVisibleRect(actualPosition); final Rect screen = new Rect(0, 0, getScreenWidth(), getScreenHeight()); return actualPosition.intersect(screen); } public static int getScreenWidth() { return Resources.getSystem().getDisplayMetrics().widthPixels; } public static int getScreenHeight() { return Resources.getSystem().getDisplayMetrics().heightPixels; }。 ngOnInit仅被调用一次，但是订阅将保持活动状态，直到标头被销毁为止。确保在MessageService中存储消息的对象是可订阅的（例如Subject）。

例如如果您的MessageService具有message $属性，该属性将在显示消息时更新。

MessageService

您可以在标题中订阅export class MessageService { private _message$ = new Subject(); constructor() { } public setMessage(msg: string) { this._message$.next(msg); } public getMessage(): Observable<string> { return this._message$.asObservable(); } }方法，并将其分配给getMessage。您可以使用headerMessage在标题html中显示消息

headerMessage

当您需要在其他组件的标头中设置新消息时，可以将MessageService注入该组件，并使用以下代码进行相同的操作。

export class HeaderComponent implements OnInit {

  headerMessage: string;

  constructor(private messageService: MessageService) { }

  ngOnInit() {
    this.messageService.getMessage().subscribe(message => this.headerMessage = message);
  }

}

这将触发this.messageService.setMessage('sample message');中的getMessage订阅，并且headerComponent属性将更新为新消息-“示例消息”。

与静态组件共享数据-Angular

1 个答案: