我有一个 Observable 给我一些日志更改（有时每毫秒数百）。
我订阅了这个 Observable，并且可以很好地控制所有的变化。 ngOnInit()
当我pipe async将此 Observable 转换为子组件的 HTML时，问题就出现@Input()了 - 如果父组件上的 Observable 看到它的标量值在几毫秒内发生变化……事实上，在子组件上没有发生变化检测.
我的这个 Observable 是一个简单的字符串，时间戳为 1/1000（作为浏览器的 console.log）。因此，我的这种情况与可以相同的 s 或s
无关，实际上可能不会触发任何更改...ArrayObject
有什么建议吗？太感谢了！
顺便说一句，这是一个 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 缺失，虽然订阅$$$$$$$$得到它们）：
谢谢！