动态清晰度应用级别警报

Question

我正在使用vmware/clarity design system and I'm trying to implement dynamic app-level alerts using the dynamic component loading outlined in angular.io。我以前遵循过这种模式，但我似乎无法让它与来自 Clarity 的警报一起使用。

app.component.ts

import { AfterViewInit, Component, ComponentFactoryResolver, OnDestroy, ViewChild } from '@angular/core';
import { ClrAlert } from '@clr/angular';

import { AlertsHostDirective } from './directives/alerts-host.directive';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements AfterViewInit, OnDestroy {

  @ViewChild(AlertsHostDirective) alerts: AlertsHostDirective;
  private interval: NodeJS.Timer;

  constructor(private _componentFactoryResolver: ComponentFactoryResolver) { }

  ngAfterViewInit(): void {
    this.alert();
    this.getAlerts();
  }

  ngOnDestroy(): void {
    clearInterval(this.interval);
  }

  private alert() {
    const componentFactory = this._componentFactoryResolver.resolveComponentFactory(ClrAlert);

    const viewContainerRef = this.alerts.viewContainerRef;
    const componentRef = viewContainerRef.createComponent(componentFactory);

    componentRef.instance.isAppLevel = true;
    componentRef.changeDetectorRef.detectChanges();
  }

  private getAlerts() {
    this.interval = setInterval(() => {
      this.alert();
    }, 5000);
  }

}

app.component.html

<clr-main-container>
    <clr-alerts>
        <ng-template appAlertsHost></ng-template>
        <clr-alert clrAlertType="info"
                   [clrAlertAppLevel]="true">
            <div class="alert-item">
                <span class="alert-text">This is the first app level alert.    </span>
                <div class="alert-actions">
                    <button class="btn alert-action">Fix</button>
                </div>
            </div>
        </clr-alert>
        <clr-alert clrAlertType="danger"
                   [clrAlertAppLevel]="true">
            <div class="alert-item">
                <span class="alert-text">This is a second app level alert.</span>
                <div class="alert-actions">
                    <button class="btn alert-action">Fix</button>
                </div>
            </div>
        </clr-alert>
    </clr-alerts>
...

警报-host.directive.ts

import { Directive, ViewContainerRef } from '@angular/core';

@Directive({
  selector: '[appAlertsHost]'
})
export class AlertsHostDirective {

  constructor(public viewContainerRef: ViewContainerRef) { }

}

如果我将指令放在 ClrAlerts 组件上，它会按照应有的方式工作，即在 DOM 中的 ClrAlerts 之后附加应用程序级警报。但我希望我所有的应用程序级警报在它们进入时都出现在该组件内。反过来，我希望寻呼机组件看起来也已更新。

这可能吗？

Answer 1

在评论中讨论之后，我认为如果我只是简单地使用 *ngFor 发布我的意思会更容易：https://stackblitz.com/edit/clarity-light-theme-v11-vs8aig?file=app%2Fnotifications.provider.ts

使用组件工厂创建始终相同的组件完全是矫枉过正，是一种糟糕的做法。您链接的 Angular 文档部分专门解释了他们的用例是在他们甚至不知道第一个组件的实际 class 时动态实例化一个新组件地点。我希望我上面的例子能帮助您了解如何在您的项目中组织这些警报。

Answer 2

@Eudes 指出我把事情搞得太复杂了。基本上，我只需要跟踪一组通知，这样当 "alert-able" 发生某些事情时，我可以将一个警报对象推送到该数组并让它们通过 *ngFor.

呈现

但是，ClrAlerts 父组件在某些情况下正确处理这些更改似乎存在问题。例如，如果您从数组中的警报开始，通过用户交互关闭它们，然后添加更多警报，则当前警报设置不正确。因此，这似乎是我能想到的最干净的解决方案：

模板

<clr-main-container>
    <clr-alerts>
        <clr-alert *ngFor="let alert of alerts"
                   [clrAlertType]="alert.type"
                   [clrAlertAppLevel]="true">
            <div class="alert-item">
                <span class="alert-text">{{alert.text}}</span>
                <div class="alert-actions"
                     *ngIf="alert.action">
                    <button class="btn alert-action">{{alert.action}}</button>
                </div>
            </div>
        </clr-alert>
    </clr-alerts>
    ...

组件

import 'rxjs/add/Observable/of';

import { AfterViewInit, Component, OnDestroy, ViewChild } from '@angular/core';
import { ClrAlerts } from '@clr/angular';

export interface AppLevelAlert {
  type: 'info' | 'warning' | 'success' | 'danger';
  text: string;
  action: string;
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements AfterViewInit, OnDestroy {

  @ViewChild(ClrAlerts) alertsContainer: ClrAlerts;
  private interval: NodeJS.Timer;
  alerts: AppLevelAlert[] = [];

  ngAfterViewInit(): void {
    this.alert();
    this.getAlerts();
  }

  ngOnDestroy(): void {
    clearInterval(this.interval);
  }

  private alert() {
    this.alerts.push({
      type: 'success',
      text: 'This was added later!',
      action: 'Do nothing'
    });
    if (!this.alertsContainer.currentAlert) {
      this.alertsContainer.multiAlertService.current = 0;
    }
  }

  private getAlerts() {
    this.interval = setInterval(() => {
      this.alert();
    }, 5000);
  }

}

动态清晰度应用级别警报

Dynamic Clarity App Level Alerts

dynamic

clarity

angular2-changedetection

angular

vmware-clarity

app.component.ts

app.component.html

警报-host.directive.ts

模板

组件