标签: angular-cdk

我正在尝试将固定宽度的 MatDialog 水平居中：

let dialog = this.dialog.open(EditVisitPopupComponent,
  { data: { visit: this.visit }, width: '100%', maxWidth: '500px' });

出于某种原因，添加width参数会justify-content: flex start向父叠加层添加内联，而我希望它保持不变justify-content: center。

我知道创建模态的方法，包括创建一个Overlay并将组件注入其中。但我不明白为什么我不能简单地使用MatDialog.

我试过的：

let dialog = this.dialog.open(EditVisitPopupComponent,
      { data: { visit: this.visit }, position: this.overlay.position().global().centerVertically().centerHorizontally(), width: '100%', maxWidth: '500px' });

但类型不匹配。

我也试过backdropClass和一个兄弟 CSS 选择器，但我没有得到想要的结果。

我错过了什么？有没有办法配置Overlaya 的MatDialog？

我正在尝试使用https://material.angular.io/cdk/drag-drop/overview中的Angular Material CDK DragDrop模块

通过cdkDropListDropped事件，我可以防止丢失，但也不应拖动它。如何告诉cdkDropList或每个cdkDrag元素禁用拖动？

<div class="list-group" id="orderlist" cdkDropList (cdkDropListDropped)="drop($event)">
                        <a class="list-group-item" 
                            [class.linked]="ord.linkedToPrevious" 
                            [class.selected]="ord.selected"
                            *ngFor="let ord of items" (click)="selectOrder(ord, $event)" cdkDrag>
                            <button class="btn btn-default btn-link linkeditem" [class.linked]="ord.linkedToPrevious" 
                                (click)="linkTechnology(ord, $event)" 
                                    [attr.disabled]="editing ? null : true">
                                <span class="glyphicon glyphicon-link"></span>
                            </button>
                            <h4>{{ord.technology.name}}</h4>
                        </a>
                    </div>

到目前为止，我之前构建无限滚动器的所有尝试都失败了。我目前正在处理的组件使用 Angular 的虚拟滚动，并且应该在达到虚拟滚动视口的某个索引时更新数据源。虽然 BehaviorSubject 确实得到了更新，但我在视图中看不到新版本。

我的组件如下所示：

import {Day, Month, Selected, Weekday} from './datepicker';
import {CdkVirtualScrollViewport} from '@angular/cdk/scrolling';
import {BehaviorSubject} from 'rxjs';

@Component({
  selector: 'app-calendar-datepicker',
  templateUrl: './calendar-datepicker.component.html',
  styleUrls: ['./calendar-datepicker.component.scss']
})
export class CalendarDatepickerComponent implements OnInit {
  months: BehaviorSubject<any[]> = new BehaviorSubject<any[]>([]);

  previousScrollIndex: number;

  @ViewChild('dateScroller') dateScroller: CdkVirtualScrollViewport;

  constructor() {
  }

  ngOnInit() {
    /*initialization of the array*/
    const initialMonths = [];
    const month = new Month(this.currentDate);
    const date = moment(this.currentDate);
    const nextMonth = new Month(date.add(1, 'M'));
    const nextDate = moment(date);
    const monthAfterNextMonth = …

尝试查询 a ng-templatewithCdkPortalOutlet总是不成功，我不明白为什么？

<ng-template CdkPortalOutlet></ng-template>

@ViewChild(CdkPortalOutlet) test: CdkPortalOutlet;

闪电战

我正在创建一个生成 cdk 覆盖的服务。我想做的是找到一种方法来监听 cdk 滚动策略事件。更具体地说，我想知道 cdk 何时使用“关闭”滚动策略关闭覆盖。最终目标是创建一个可观察对象，消费者可以使用它来确定覆盖层是否打开（有条件地应用 CSS 以及不应用 CSS）。

经过一番搜索后，看起来overlayRef有一个属性_portalOutlet，它有一个属性_isDispose（https://github.com/angular/material2/blob/master/src/cdk/overlay/overlay-ref.ts）。这看起来像我正在寻找的东西，但当然这些是私人财产，消费者无法使用。

我无法想象 cdk 覆盖真的没有这样的公共财产，我真的希望有人指出我的无知。顺便说一句，我正在使用 Angular 5。

此STACKBLITZ（SB）显示了问题。

CSS类.WHYYYYY显示了我面临的“两个”问题。

1. 为了使菜单在悬停时打开，我需要在菜单按钮上进行设置z-index:1050;（ref 2 hacky workaround）。
2. 这就产生了“对话框雾”的问题。（单击按钮-> SB）
3. 我发现叠加层的默认“ z索引为1000”

看来我有两种解决方法。

1. 给雾一个更高的z索引（hack hack）
2. （所需的解决方案）使悬停菜单与常规z-index一起使用。
   • 我不明白我为什么需要z-index:1050;。看来，当打开菜单菜单时，它会瞬间升高“ z索引方向”，因此我触发了按钮事件（实际上是再次关闭其菜单菜单）。

这是错误吗？我可以防止创建的菜单菜单刺穿/刺入吗？如何在雾下禁用工作中的悬停菜单？

我注意到当我将 cdk 虚拟滚动的 itemSize 设置为较低的值时，页面的加载时间几乎是两倍。

<cdk-virtual-scroll-viewport [itemSize]="45"和<cdk-virtual-scroll-viewport [itemSize]="20"（一个有 2k 行的表）之间有很大的不同。

我的问题是为什么页面的加载从 2 秒到将近 5 秒？怎么会有这么大的不同？

在我的Angular应用程序中，我使用的是来自 Angular cdk的Virtual Scroll。

这是我的组件模板：

<cdk-virtual-scroll-viewport itemSize="50" class="example-viewport">
  <div *cdkVirtualFor="let item of items" class="example-item">{{item}}</div>
</cdk-virtual-scroll-viewport>

在我的 Component 类中，我有一个方法可以更改数组items并为其提供新内容。每次调用此方法时，数组的大小都可以更改：

reload(newItems) {
  this.items = newItems;
}

调用该方法后reload，项目数组将正确更新，并且视图会反映此更改。但是，滚动不会回到顶部。

我希望每次items更改数组时都使用虚拟滚动来重置顶部的滚动。

我需要使用 angular-cdk 制作可拖动的项目。我已经在 app 模块中导入了 DragDropModule。我正在 ngFor 中应用 cdkDrag。

<div *ngIf="messages.length" >
    <div
      *ngFor="let message of messages" cdkDrag>
      <strong>{{ message }}</strong>
    </div>
  </div>

拖动没有按预期工作，控制台中也没有出现错误。拖动功能适用于普通 div 元素。

我的 Angular 11 项目中突然出现以下错误：

Error: ./node_modules/@angular/material/fesm2015/core.js 1091:45-77
"export 'isFakeTouchstartFromScreenReader' was not found in '@angular/cdk/a11y'

Error: ./node_modules/@angular/material/fesm2015/menu.js 786:17-49
"export 'isFakeTouchstartFromScreenReader' was not found in '@angular/cdk/a11y'

我试过的：

ng add @angular/material
npm i @angular/material
npm i