У меня есть Observable, дающий мне некоторые изменения журнала (иногда сотни за миллисекунду).
Я подписываюсь на этот Observable на ngOnInit() и могу красиво консалтировать ВСЕ изменения.
Проблема возникает, когда я pipe async this Observable в HTML @Input() дочернего компонента - если Observable, на родительском компоненте, видит, что его скалярное значение изменяется на доли миллисекунд ... что он фактически делает, не обнаруживает изменений < / strong> происходит в дочернем компоненте.
Этот мой Observable представляет собой простую строку с отметкой времени 1/1000 (как в журнале console.log браузера).
Итак, мой случай не имеет ничего общего с Arrays или Objects, которые могут быть то же и, по сути, может не вызвать никаких изменений ...
Есть предложения? Большое спасибо!
Кстати, это для приложения Angular, которое пытается регистрировать все, что происходит при повторном рендеринге и повторном монтировании 3D-компонентов Scene, обращаясь к ThreeJS библиотеке.
Вы могу представить скорость ...
Немного о посланном коде.
logger.service.ts:
@Injectable({
providedIn: 'root'
})
export class LoggerService {
public newEvtLogged$ = new Subject<string>();
constructor() { }
addLog(log: string) {
const timeStamp = this.returnNowsTime();
const loggedEvt = `@ ${timeStamp}: ${log}`;
this.newEvtLogged$.next(loggedEvt);
}
...
/**
* We want to simulate the broser'd Inspector timestamp.
* A kind of an unique Id could be '#${new Date().getTime()}'
* But we want user to see when the event happened...
*/
private returnNowsTime(): string {
const now = new Date();
return now.toLocaleTimeString() + '.' + now.getMilliseconds();
}
}
parent-component.ts
@Component({
selector: 'app-component-menu',
templateUrl: './component-menu.component.html',
styleUrls: ['./component-menu.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class ComponentMenuComponent implements OnInit, OnChanges, AfterViewInit, AfterViewChecked, OnDestroy {
...
// NgRxJS stream of added logg events, through LoggerService, all over the App:
loggEvent$: Observable<string>;
loggSubscription: Subscription;
loggEvent: string;
...
ngOnInit() {
this.loggEvent$ = this.THreeJSloggerService.newEvtLogged$;
// Check we're subscribing from the beginning:
this.loggSubscription = this.loggEvent$.subscribe((logEvt: string) => {
console.log('$$$$$$$$ NEW LOGG EVENT: ', logEvt);
this.loggEvent = logEvt;
});
}
parent-component.html
<ng3d-monitor-debug [goToTopPosition]="monitorMarginTop" [dataToPrint]="(loggEvent$ | async)"></ng3d-monitor-debug>
child-component.ts
@Component({
selector: 'ng3d-monitor-debug',
templateUrl: './monitor-debug.component.html',
styleUrls: ['./monitor-debug.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None
})
export class MonitorDebugComponent implements OnInit, OnChanges, AfterViewInit {
...
@Input() dataToPrint: string;
...
constructor(
private hostElement: ElementRef,
private renderer: Renderer2
) { }
ngOnInit() {
...
}
ngOnChanges(propsChanged: SimpleChanges) {
// console.error(propsChanged);
if (propsChanged.dataToPrint && !propsChanged.dataToPrint.firstChange) {
// console.error('=============== dataToPrint has CHANGED:', this.dataToPrint);
this.doPrintData(this.dataToPrint, null);
}
}
...
private doPrintData(str: string, jsonData: any) {
this.contentHTMLmsg = jsonData ? str + this.prettyPrintJson(JSON.stringify(jsonData, undefined, 4)) : str;
const contentOrigStripped = str.replace(/(<([^>]+)>)/ig, ''); // <= strips from ALL HTML tags...
const contentStripped = this.contentHTMLmsg.replace(/(<([^>]+)>)/ig, '');
console.error('SHOULD PRINT (resumed):', contentOrigStripped.slice(contentOrigStripped.length - 40));
}
}
И вот консоль результаты (5 пропусков, хотя подписка $$$$$$$$ их получает):
Спасибо!
