标签: angular-cdk

有许多叠加层需要在window-resize事件发生后重新定位。

当前配置的初始值PositionStrategy 具有依赖于外部变量来对齐 Overalys 的逻辑，类似于 CSS 网格/Flexbox 行为。

这个material2 github问题似乎表明只能使用OverlayRef.dispose()=> OverlayRef.create()。

有没有满足以下条件的解决方案：

• 可以用非静态值更新位置。
• 不破坏组件实例。

最好能够从服务而不是OverlayRef组件实例中调用。

为了清楚起见，编辑 1： 鉴于以下内容PositionStrategy，OverlayRef.updatePosition()似乎不适用于重新计算 px 的需要。 *笔记 window.innerWidth

      private setChannelPosition(): PositionStrategy {
        const chatWidth = 280;
        const chatSpace = 5;
        const distanceFromEdge = 80;

        const existingModalCount = this.channelModals.size;
        const numModalsCanFit = 
           Math.floor((window.innerWidth - 2 * distanceFromEdge) / (chatWidth + chatSpace));
        const distFromRight = 
           distanceFromEdge + ((existingModalCount % numModalsCanFit) * (chatWidth + …

我在我的 spec.ts 中从 karma/jasmin 收到此错误：

没有将“exportAs”设置为“cdkStep”的指令

<!-- Step 1 -->
<cdk-step [ERROR ->]#step1="cdkStep">
    <ng-template cdkStepLabel>
        <div class="step-content">
<!-- Step 2 -->
<cdk-step [ERROR ->]#step2="cdkStep">
    <ng-template cdkStepLabel>
        <div class="step-content">
<!-- Step 3 -->
<cdk-step [ERROR ->]#step3="cdkStep">
    <ng-template cdkStepLabel>
        <div class="step-content">
<!-- Step 4 -->

我在我的组件中声明了这一点：

@ViewChild('step1') private step1: CdkStep;
@ViewChild('step2') private step2: CdkStep;

这是 TestBed 配置：

    TestBed.configureTestingModule({
        declarations: [ StepsComponent ],
        schemas: [CUSTOM_ELEMENTS_SCHEMA]
    }).compileComponents();

总的来说，我的代码与这个 Stackblitz 示例非常相似：
https://stackblitz.com/edit/angular-cdk-stepper-demo

我知道这个问题已经在这里被问过多次，但没有一个关于 'cdkStep'。
有人知道我错过了什么吗？该组件工作正常 - 只是我无法简单地expect(component).toBeTruthy();获得成功。

与测试 mat-dialog 类似，测试 cdk 覆盖的好方法是什么？

MatDialog 服务单元测试 Angular 6 错误

服务调用示例：

openNotifications(origin: HTMLElement) {
    this.refreshNotifications()
      .subscribe();
    const overlayRef = this.overlay.create({
      positionStrategy: this.overlay.position().flexibleConnectedTo(origin).withPositions([
        {
          originX: 'center',
          originY: 'bottom',
          overlayX: 'center',
          overlayY: 'top',
        }
      ]),
      hasBackdrop: true,
    });
    const portal = new ComponentPortal(NotificationsDropdownComponent);
    overlayRef.attach(portal);
    overlayRef.backdropClick().subscribe(() => {
      overlayRef.detach();
      this.refreshNotificationCount().subscribe();
    });
  }

我有一个垫子表，带有粘性标题和页面的垂直滚动。它工作正常，直到我动态添加更多列并出现水平滚动条。

粘性标题停止工作。

有什么办法让它发挥作用吗？

请看例子：

https://stackblitz.com/edit/angular-hdg9xh

我有一个版本 8 的 Angular 应用程序。我更新到了 9。我已经解决了所有编译和 linter 错误，除了一个给我带来一些问题的错误：

ERROR in The target entry-point "@angular/cdk/platform" has missing dependencies:\n\n@angular/core\n@angular/common\n

这些是我的 package.json 中的角度包：

        "@angular/animations": "10.0.12",\n        "@angular/cdk": "10.1.3",\n        "@angular/common": "10.0.12",\n        "@angular/compiler": "10.0.12",\n        "@angular/core": "10.0.12",\n        "@angular/flex-layout": "10.0.0-beta.32",\n        "@angular/forms": "10.0.12",\n        "@angular/material": "10.1.3",\n        "@angular/platform-browser": "10.0.12",\n        "@angular/platform-browser-dynamic": "10.0.12",\n        "@angular/router": "10.0.12",\n

我尝试过删除node_modules、package-lock.json、重新安装等。

我认为这可能与 ivy 编译器有关，但它正在编译所有内容（我认为）：

> ngcc --tsconfig './src/tsconfig.app.json' && bash post-install-checks.sh\n\nCompiling @angular/cdk/platform : fesm2015 as esm2015\n(and others)\n

什么会导致此类错误？我缺少什么？

以下是我发现的更多错误：

/myDevFolder/my-app/node_modules/@types/d3-shape/index.d.ts\nError:(2273, 19) TS2304: Cannot find name 'CanvasPathMethods'.\n/myDevFolder/my-app/node_modules/protractor/built/index.d.ts\nError:(5, 10) TS2440: Import …

我正在尝试使用 Angular CDK 实现覆盖。Overlay 用于具有水平滚动的容器内。如果我们滚动到左侧，覆盖层应该坚持到原始位置或消失。

我可以使用 CDK 指令成功实现此行为。（通过单击“打开”按钮并向左滚动来打开叠加层）。覆盖层跟随按钮。

使用指令的 Stackblitz 示例

我尝试在不使用指令但使用覆盖服务的情况下实现相同的目标。

使用服务的 Stackblitz 示例

在这种情况下，覆盖层将保持不变，不会随内容移动。我需要在指令上使用服务，因为我们会将其封装在自定义指令后面。关于如何通过服务实现与指令相同的行为的任何想法都非常受欢迎？提前谢谢。

使用 cypress 简单实现 Angular CDK 拖放。拥有所有软件包的最新版本，所有问题和解决方案都不起作用。

基本上，拖放操作不会触发。

尝试过

• https://www.npmjs.com/package/@4tw/cypress-drag-drop
• https://docs.cypress.io/api/commands/trigger
• 即使有 stackoverflow 上这个“已解决”问题的答案如何在赛普拉斯测试中实现拖放？

但没有任何作用。

我正在尝试将CDK数据表转换为Material Design样式的数据表(请参阅:https://material.angular.io/components/table/overview),但是当我将cdk前缀更改为md时,我得到以下错误...

未捕获错误:模板解析错误:无法绑定到'mdHeaderRowDef',因为它不是'md-header-row'的已知属性.1.如果'md-header-row'是一个Angular组件并且它有'mdHeaderRowDef'输入,那么请验证它是否是该模块的一部分.2.如果'md-header-row'是Web组件,则将'CUSTOM_ELEMENTS_SCHEMA'添加到此组件的'@NgModule.schemas'以禁止显示此消息.3.要允许任何属性将"NO_ERRORS_SCHEMA"添加到此组件的"@NgModule.schemas".

我在网上发现的每个答案都告诉我,我需要导入CdkTableModule,但我已经这样做了&cdk表工作得很好.

import {Component, OnInit, ViewChild} from '@angular/core';
import {DataSource} from '@angular/cdk';
import { CdkTableModule } from '@angular/cdk';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import 'rxjs/add/operator/first';
import 'rxjs/add/operator/startWith';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/switchMap';
import 'rxjs/add/observable/merge';
import 'rxjs/add/observable/of';
import 'rxjs/add/observable/interval';
import 'rxjs/add/operator/map';

我正在导入CdkTableModule,当我使用cdk前缀时,表格按预期显示...

<md-table [dataSource]="dataSource">

  <ng-container cdkColumnDef="number">
    <md-header-cell *cdkHeaderCellDef> number </md-header-cell>
    <md-cell *cdkCellDef="let element"><a routerLink="{{element.number}}"> {{element.number}} </a></md-cell>
  </ng-container>

  <ng-container cdkColumnDef="book">
    <md-header-cell *cdkHeaderCellDef> book </md-header-cell>
    <md-cell *cdkCellDef="let element"> {{element.book}} </md-cell>
  </ng-container>

  <md-header-row *cdkHeaderRowDef="['number', 'book']"></md-header-row>
  <md-row …

我正在尝试使用新的API来监听Material2中的滚动事件.我在app.module.ts中导入了ScrollDispatchModule,并使用cdkScrollable指令注释了一个容器,如

<div cdkScrollable>
   <div class="my-content">
   ...
   </div>
   <footer class="my-footer">
   ...
   </footer>
</div>

我想在ViewChild的组件中访问它并订阅这样的事件,但可滚动变量总是未定义的:

  @ViewChild(Scrollable) scrollable: Scrollable; 

  ngAfterViewInit() {
     this.scrollable.elementScrolled().subscribe(scrolled => {
         //do stuff
     });
  }

我是否以正确的方式使用这些API？

我目前正在使用，Angular Material cdkoverlay并且想要在我点击屏幕上除叠加层之外的其他任何位置时将其关闭。我已经前进并订阅了，backdropClick()但无法解决。

launchOverlay() {
        let strategy = this.overlay.position()
        .connectedTo(
            this._overlayOrigin,
            {originX: 'end', originY: 'top'},
            {overlayX: 'end', overlayY: 'top'} );
        let config = new OverlayConfig({positionStrategy: strategy, width: '280px', scrollStrategy: this.overlay.scrollStrategies.reposition()});
        this._overlayRef = this.overlay.create(config);
        this._overlayRef.attach(new TemplatePortal(this.filterTemplate, this.viewContainerRef));
        this._overlayRef.backdropClick().subscribe(() => this.close()}, () => console.log("ERROR"), () => console.log("COMPLETE"));
}

 close(){
    this._overlayRef.dispose();
}

<ng-template cdkPortal #columnFilter>
    <mat-card>
        HELLO WORLD
    </mat-card>
</ng-template>

创建和启动叠加层的所有操作都可以正常运行，只是响应外部点击。

如果我添加hasBackdrop: true到OverlayConfig它，那么它将创建一个深灰色的背景，并且在外部单击会起作用，但是我不希望使用可见的背景，例如selete组件。