Question

我是Angular2的新手，我需要在UI组件（如@ angular / material）上构建一个模块，这样我的队友才能关心API暴露给他们，而不是我使用的UI框架。 / p>

例如，当他们想要使用%SIG函数时，他们可以简单地使用alert，并以某种方式在他们的代码中使用，忽略了UI框架。即使我们更改其UI框架（或主题），业务逻辑也可以保持不变。

我已经搜索了很多关于扩展UI组件的信息，并使用组件创建了一个共享的NgModule。而且还不确定如何制作它。特别是使用@ angular / material。

感谢您的帮助！

Answer 1

您确定不能简单地使用组件和服务来实现这一目标吗？当您创建Angular2组件时，您可以将“逻辑”和模板代码放在两个不同的文件中，因此可以随时修改模板（UI /主题），而不会影响“逻辑”。然后，您可以创建警报服务以管理其他组件与警报组件之间的通信。这是一个例子......

对于组件警报，您可以有两个单独的文件altert.html和alert.ts - 您的所有UI（html）代码都在alert.html内，所有逻辑都在alert.ts ...您的代码将会看起来如下所示：

警告模板： alert.html

  <div id="card-alert" *ngIf="alertMessage != "" && alertMessage != null">
      <p>ALERT: {{ alertMessage }}</p>
  </div>

警报逻辑： alert.ts

    import {Component} from '@angular/core';
    import {CustomAlertService} from './alert.service';

    @Component({
      selector: 'alert',
      templateUrl: './alert.html'
    })
    export class CustomAlert {
      alertSubscription: any; // this will allow you to reference the subscription in order to be able to unsubscribe later 

      alertMessage: String;

      constructor(private alertService: CustomAlertService) { // you could also have an alert service hooked up here 
        this.alertSubscription = this.alertService.alertMessage$.subscribe(
            message => 
            this.alertMessage = message; // update current alert message to be displayed
            );
      }

    ngOnDestroy() {
    // you want to unsubscribe when component is destroyed to prevent potential memory leak 
   this.alertSubscription.unsubscribe();
   }
    }

现在提供警报服务，请参阅下文。我不会对此作出太多解释，因为在这篇SO文章中，标记已做得很好：Delegation: EventEmitter or Observable in Angular2。

警报逻辑（服务）： alert.service.ts

import {Injectable} from '@angular/core';
import {Observable} from 'rxjs/Observable';
import {Observer} from 'rxjs/Observer';

@Injectable()
export class CustomAlertService {
    alertMessage$: Obersvable<string>;
    private _observer: Observer;

    constructor() {
    this.alertMessage$ = new Observable(observer =>
      this._observer = observer).share(); 
}

    setAlertMessage(alert: String) {
      this._observer.next(alert)
    }

}

因此，您的同事只需在应用程序的某个高级别中包含您的CustomAlert组件即可。在他们想要显示警报的特定组件内部，然后可以通过调用CustomAlertSercice上的setAlertMessage（）来简单地注入CustomAlertService并更新警报消息，CustomAlertSessice将依次通知您的CustomAlert组件，该组件将呈现警报......

在Angular2中，如何将UI模块与逻辑分离

1 个答案: