如何使角度定制模态分量全局化以便在任何地方使用它？

Question

我正在从事一个angular7项目。我有一个模式登录组件，我希望它在桌面屏幕和移动屏幕中以不同的方式显示。为此，我使用了BreackPointObserver中的@angular/cdk/layout。

以下代码运行良好：

ngOnInit() {

    this._breakpointObserver.observe([Breakpoints.XSmall, 
    Breakpoints.Small]).subscribe(value => {
        if (value.matches) {
            this.mobileLayout= true;
        } else {
            this.mobileLayout= false;
        }
    });
}



 openUserRegistrationModal(): void { 
        if(this.mobileLayout){
            const dialogRef = this.modal.open(UserRegistrationModalComponent, {
                width: '500px',
            });
        } else {
            const dialogRef = this.modal.open(UserRegistrationModalComponent, {
                width: 90%,
            });
        }
}  

我在导航栏组件中使用此代码。但是我需要comment component，like component和...

现在的问题是，我是否必须在需要的每个组件中重复此代码？如何使它成为全局Service/Component以便易于使用并且无需重复代码？