我正在使用Angular 5,虽然我不知道我的问题是否与版本或Angular或我编写组件的方式有关 .
我正在创建一个看起来和表现得像 table 的组件 . 它由两个主要部分组成:工具栏和表本身 . 以下是我的模板的简化示例:
<div class="list__table">
<!-- The toolbar -->
<div class="list-toolbar__wrapper" *ngIf="hasToolbar">
<div class="list-toolbar">
<div class="list-toolbar__right-column">
<div class="list-toolbar__right-column__conditional">
<toolbar-root [settings]="getToolbarItemsA()" i18nStrings="" [svgIconsPath]="svgIconsPath()"></toolbar-root>
</div>
<div class="list-toolbar__right-column__action">
<toolbar-root [settings]="getToolbarItemsB()" i18nStrings="" [svgIconsPath]="svgIconsPath()"></toolbar-root>
</div>
</div>
</div>
</div>
<!-- end of toolbar -->
<!-- Begining of content -->
<div>
<!-- Table head -->
<div
class="list__table__header"
[style.padding-right]="hasScrollbar ? scrollbarWidth : 0">
<div class="list-row list-row--head">
<span
class="list-checkbox list-row__checkbox"
[ngClass]="{'list-checkbox--checked': areAllRowsSelected, 'list-checkbox--indeterminate': areSomeRowsSelected}"
*ngIf="hasToolbar"
(click)="toggleAllChecked()">
<span class="list-checkbox__box"></span>
<svg class="list-checkbox__checked-mark">
<use xlink:href="#NotificationValidation" />
</svg>
<svg class="list-checkbox__indeterminate-mark">
<use xlink:href="#IndeterminateCheckbox" />
</svg>
</span>
<span
*ngFor="let column of getVisibleColumns()"
class="list-row__data list-row__data--{{column.size}}"
(click)="changeSelectedColumnSortingState(column.prop)">
<div class="list-row__data__text" [ngClass]="{'list-row__data__text--selected' : column.prop == selectedColumn}">
{{column.name}}
</div>
</span>
</div>
</div>
<!-- end of table head -->
<!-- Content rows -->
<div class="list__table__content" id="scrollableTableContent">
<!-- Repeatable rows -->
<div
class="list-row"
[ngClass]="{'list-row--selected': row.isSelected, 'list-row--selectable' : hasToolbar}"
*ngFor="let row of visibleRows | slice:0:20; index as i"
(click)="toggleSelectedRow(i)">
<span
class="list-checkbox list-row__checkbox"
*ngIf="hasToolbar"
[ngClass]="{'list-checkbox--checked': row.isSelected}">
<span class="list-checkbox__box"></span>
<svg class="list-checkbox__checked-mark">
<use xlink:href="#NotificationValidation" />
</svg>
</span>
<span
class="list-row__data list-row__data--{{column.size}}"
*ngFor="let column of getVisibleColumns()">
<div class="list-row__data__text" *ngIf="row[column.prop]">{{row[column.prop]}}</div>
</span>
</div>
<!-- end of repeatable rows -->
</div>
<!-- end of content rows -->
</div>
<!-- end of content -->
</div>
如您所见,我在 list-toolbar__wrapper
上使用 *ngIf 指令来控制DOM中工具栏的存在 . hasToolbar
在我的组件类中设置为 true
,如下所示: public hasToolbar: boolean = true
但是,无论 hasToolbar
值,我在模板上使用 *ngIf
的那一刻,我得到了一些奇怪的视觉"glitches" . 表头上的 list-row__data
是"blinking",工具栏上有任何操作(例如悬停,单击),它们本身和我的内容行 . 深入研究问题,我发现了触发这种行为的原因,但我不明白为什么会这样 . toolbar-root
组件本身有一个 toolbar-item
组件,它最终包含我的 ripple-root
组件,其模板如下所示:
<div #ripple class="entity-header-ripple" (click)="handleClick()" (mousedown)="handleMouseDown($event)" [style.borderRadius]="getBorderRadius()" [ngClass]="{'entity-header-ripple--clicked': isClicked}">
<div class="entity-header-ripple__circle" [style.backgroundColor]="color" [style.width.px]="getCircleDiameter()" [style.height.px]="getCircleDiameter()" [style.top.px]="getTopPosition()" [style.left.px]="getLeftPosition()" [ngStyle]="{'transformorigin': 2, '-webkit-transform-origin': 2}"></div>
</div>
当我用[style]或[ngStyle]更改分配给方法( getBorderRadius()
, getCircleDiameter()
, getTopPosition()
, getLeftPosition()
)的每个代码位,并给它们静态值(如'20')时,不再有闪烁的问题 .
我需要我的工具栏是条件的,我想保持我的波纹组件,或者稍作修改 . 总的来说,我想了解导致问题的原因是什么 .
1 回答
模板中的函数调用问题是每次更改检测运行时都会调用它们,即 . 任何事件 . 您可以使用属性而不是方法,或者更好:使用异步管道的Observables / BehaviorSubjects可以处理您的变更检测,从而允许您使用OnPush .