小编Ita*_*tai的帖子

我正在寻找具有以下功能的角度虚拟滚动包：1）水平虚拟滚动2）容器宽度和高度是可变的。3) 项目宽度设置为容器宽度的百分比。4) 项目可以在渲染期间最小化。

Angular cdk 目前使用固定的 itemSize 来确定高度和宽度......下面是一个如何渲染它的示例：

.parent {
  width: 100%;
  height: 100%;
  display: flex;
  padding: 10px;
}
.child {
  width: 33.333%;
  height: 100%;
}
.child.mini {
  width: 40px;
}

<div class="parent">
  <div class="child" *ngFor="let item of items" [class.mini]="item.isMini">
    <button (click)="item.isMini = !item.isMini">Minimize Me!</button>
    {{item.name}}
  </div>
</div>

有什么推荐吗？

我正在尝试根据元素的宽度和高度进行一些计算，但由于某种原因，这些在AfterViewInit生命周期挂钩上无法立即使用（两者均为 0）。
虽然setTimeout似乎确实可以解决问题，但我不喜欢它。

这是什么原因造成的？有没有更优雅的解决方案？

@ViewChild('main') mainDiv: ElementRef;

ngAfterViewInit() {

  this.printMainHeight() // 0

  // with setTimeout width is correctly retrieved ...

  setTimeout(() => this.printMainHeight()) // 430

}

printMainHeight() {

  console.log(this.mainDiv.nativeElement.getBoundingClientRect().height)     

}

HTML

<div class"main" #main>
  <app-toolbar></app-toolbar>
  <app-list></app-list>
</div>

我正在尝试创建一个可重用的 Modal 组件。在 ModalService 中，我有一个主题，以及一个在主题上调用 next() 的方法。ModalComponent 订阅该主题，但是每当调用服务中的方法时，观察者的下一个函数都会触发两次。有谁知道这是什么原因造成的？

export class ModalService { 
  openModal = new Subject(); 

  constructor() { } 

  open(cmp) { 
     this.openModal.next(cmp); 
   } 
}

模态组件：

export class ModalComponent implements OnInit {
  component: ComponentRef<any>;

  @ViewChild('entry', { read: ViewContainerRef }) entry: ViewContainerRef;

  constructor(
    private resolver: ComponentFactoryResolver,
    private modalService: ModalService
  ) {}

  ngOnInit() {
    this.modalService.openModal.subscribe(cmp => {

      // CALLD TWICE EVRY TIME THE SERVICE CALLS .next()
      console.log(cmp);
    });
  }

我正在使用带有 Prettier 的 Visual Studio Code，其功能如下：

(token: string) => this.token = token

变成：

(token: string) => (this.token = token)

我认为它使它不那么可读......有没有办法防止这种情况？

声明 ActionReducerMap 中的所有减速器都可以对其做出反应的“INIT_ACTION”的正确方法是什么？

这是我的代码如何的示例，我需要所有 3 个减速器（图像、标签、已添加标签）来对单个操作做出反应：

import { ActionReducerMap, createFeatureSelector } from '@ngrx/store';

import * as fromRoot from '../../../store';

import * as fromImages from './image.reducer';
import * as fromTags from './tag.reducer';
import * as fromAddedTags from './added-tag.reducer';

export interface AnalysisState {
    images: fromImages.State;
    tags: fromTags.State;
    addedTags: fromTags.State;
}
export interface State extends fromRoot.State {
    analysis: AnalysisState;
}

export const reducers: ActionReducerMap<AnalysisState> = {
    images: fromImages.reducer,
    tags: fromTags.reducer,
    addedTags: fromAddedTags.reducer
};

export const getAnlysisState = createFeatureSelector<AnalysisState>('analysis');

这是一个示例操作文件：

import { Action } …