Я использую vmware/clarity
дизайн-систему и пытаюсь реализовать динамические оповещения на уровне приложения с помощью загрузка динамического компонента описана в 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
, он будет работать так, как должен, в том случае, если оповещения уровня приложения будут добавлены после ClrAlerts
в DOM. Но я хочу, чтобы все мои оповещения на уровне приложения появлялись внутри этого компонента по мере их поступления. В свою очередь, я хотел бы, чтобы компонент пейджера также обновлялся.
Это возможно?
ClrAlert
, насколько он динамичен? В вашем примере вы можете просто использовать простой*ngFor
, и он будет работать нормально. - person Eudes   schedule 13.02.2018*ngFor
потребовал бы, чтобы я знал все уведомления до того, как приложение загрузится, что упускает суть того, что я пытаюсь сделать. - person Jake Smith   schedule 13.02.2018