标签: angular-cdk

我有角材料数据源。角材料版本是 ^5.0.3 排序工作。但是，对于某些列，它的排序不正确。数字和文本在哪里。例如，排序结果如“XXX”、“1”、“1tesxt”、“1”、“OPD”、“OXD”、“12”。

<mat-table #table [dataSource]="dataSource" matSort > 
  <ng-container matColumnDef="model">
    <mat-header-cell *matHeaderCellDef mat-sort-header> Model </mat-header-cell>
    <mat-cell *matCellDef="let element"> {{element.model}} </mat-cell>
  </ng-container>

感谢你的帮助。

我想使用角度材料进度微调器并添加

import {MatProgressSpinnerModule} from '@angular/material';

在导入数组和组件中添加

还没有尝试使用选择器更新模板并删除它。在任何一种情况下都会出现错误。

我正在使用 system.config.js，并为所有角度材质和 cdk js 文件添加了贴图值。

使用 angular 4.3.2 和 angular material 最新版本。得到以下错误。

errors.ts:42 错误错误：未捕获（承诺）：错误：TypeError：core.defineInjectable 不是 eval 的函数（http://localhost:8000/node_modules/@angular/cdk/bundles/cdk-bidi.umd .js:89:62 ) 在 Object.eval ( http://localhost:8000/node_modules/@angular/cdk/bundles/cdk-bidi.umd.js:91:2 ) 加载http://localhost:8000 时出错 /app/UMSClient/com/ipc/ums/modules/EnterpriseTree/Enterprise.module.js 在 eval ( http://localhost:8000/node_modules/@angular/cdk/bundles/cdk-bidi.umd.js:89: 62 ) 在 Object.eval ( http://localhost:8000/node_modules/@angular/cdk/bundles/cdk-bidi.umd.js:91:2 ) 加载错误 http://localhost:8000/app/UMSClient/com/ipc/ums/modules/EnterpriseTree/Enterprise.module.js

可能有什么问题？

谢谢，

我有这个 ActionButtonComponent，它使用 Angular CDK Portal：

import { CdkPortal, DomPortalHost } from '@angular/cdk/portal';
import { AfterViewInit, ApplicationRef, Component, ComponentFactoryResolver, Injector, OnDestroy, ViewChild } from '@angular/core';

@Component({
  selector: 'app-action-button',
  template: `
    <ng-container *cdkPortal>
      <ng-content></ng-content>
    </ng-container>
  `
})
export class ActionButtonComponent implements AfterViewInit, OnDestroy {

  @ViewChild(CdkPortal)
  private portal: CdkPortal;

  private host: DomPortalHost;

  constructor(
    private componentFactoryResolver: ComponentFactoryResolver,
    private applicationRef: ApplicationRef,
    private injector: Injector
  ) { }

  ngAfterViewInit(): void {
    this.host = new DomPortalHost(
      document.querySelector('#action'),
      this.componentFactoryResolver,
      this.applicationRef,
      this.injector
    );

    console.log(this.portal); // <-- logs "undefined"
    console.log(document.querySelector('#action')); …

我正在使用 cdkoverlay，它似乎有一个默认的深色背景。查看文档Overlay Documentation，我应该能够通过设置背景类来更改为透明背景。难道我做错了什么？

角度版本 - 7.2.7
cdk 版本 - 7.3.3

<button mat-icon-button (click)="isOpen = !isOpen" cdkOverlayOrigin 
        #trigger="cdkOverlayOrigin">
  <mat-icon>opacity</mat-icon>
</button>

<ng-template cdkConnectedOverlay 
        [cdkConnectedOverlayHasBackdrop]="true"
        [cdkConnectedOverlayBackdropClass]="cdk-overlay-transparent-backdrop"   
        (backdropClick)="isOpen = false" 
        [cdkConnectedOverlayOrigin]="trigger" 
        [cdkConnectedOverlayOpen]="isOpen">

    <div class="e6-menu-panel" role="dialog">
    <div class="e6-grid-container" role="listbox" tabindex="0" cdkTrapFocus>
    <div class="e6-grid-item" *ngFor="let theme of themes; index as i"
        (click)="install(theme); isOpen=false" role="option"
        [style.background-color]="theme.primary">

        <mat-icon class="e6-active-icon" *ngIf="current == theme">
          check_circle
        </mat-icon>
    </div>
    </div>
    </div>

</ng-template>

我正在尝试使用 Angular 材质拖放一个自由节点。它不是列表的一部分，但我想知道该项目何时被删除。我不确定如何绑定到此事件。

我只是想知道节点何时被删除。

到目前为止，这是我的代码：

    <svg id="svgCanvas" >

    <g *ngFor="let link of linkPaths">
        <path [attr.d]="link"></path>
    </g>

    <g *ngFor="let node of nodes" id="nodesGroup">
        <circle class="node" [attr.cx]="node.x" [attr.cy]="node.y + 45" [attr.r]="settings.nodes.radius"
            (click)="nodeClick($event)"  (dragEnd)="drop($event, node)" [attr.data-selected]="node.data.selected" cdkDrag cdkDragBoundary="#svgCanvas" ></circle>
    </g>

</svg>

我希望触发 DragEnd 事件并在组件代码中调用我的放置函数。

private drop(event) {
   console.log('drag end')
}

点击事件似乎有效，但放置不会触发。

我可以看到列表支持拖放功能，但我没有对列表使用拖放功能。这些是自由移动的节点。

我必须手动传递overlayRef，有没有更好的方法将它包含在带有DI的组件构造函数中？

服务代码：

display() {
    const overlayRef = this.overlay.create({
      positionStrategy: this.overlay.position().global().top(),
    });
    const portal = new ComponentPortal(ErrorsListBottomSheetComponent);
    this.ref = overlayRef.attach<ErrorsListBottomSheetComponent>(portal);
    this.ref.instance.overlayRef = overlayRef;
    overlayRef.backdropClick().subscribe(() => {
      overlayRef.detach();
    });

  }

组件代码：

export class ErrorsListBottomSheetComponent implements OnInit {
  overlayRef: OverlayRef; -- REMOVE THIS--

  constructor(
-- ADD SOMETHING HERE --
  ) {}

close() {
    if (this.overlayRef) {
      this.overlayRef.detach();
    }
  }

更好的是，是否有类似的叠加

<button mat-dialog-close>close</button>

代替

<button (click)="close()">close</button>

题

如何配置在大屏幕和小屏幕上都很好用的材料 cdk 覆盖位置策略？

目标

我的目标是使用Angular 覆盖 CDK创建一个覆盖，遵循以下规则：

• 切勿在视口外放置叠加层
• 最大高度 300 像素
• 位置叠加 y，优先级为顶部，居中底部。
• 在高度低于 300 的屏幕上，使用可用高度。
• 换句话说，没有最小高度。

什么有效

我已经完成了上述一些要求，正如您在此处看到的，定位在具有足够垂直空间（在本例中为 512px）的设备上效果很好：

破损的部分

但是，从下面的 gif 中可以看出，这不适用于垂直空间不足的小型设备（在本例中为 255px）。实际上，正如您从 GIF 中可以看出的那样，在其中两个案例中，它非常接近。位置是正确的，只是高度有偏差。

这里的目标是使用可用空间，如红色所示：

编码

我有一个堆栈闪电战，你可以在这里进行实验。

成分

openPopup(element: any) {
    const overlayRef = this.overlay.create({
      hasBackdrop: true,
      positionStrategy: this.overlay.position()
      .flexibleConnectedTo(element)
      .withLockedPosition()
      .withPositions([
        {
          panelClass: 'custom-panel1',
          originX: 'center',
          originY: 'center',
          overlayX: 'start',
          overlayY: 'top',
        },
        {
          panelClass: 'custom-panel2',
          originX: 'center',
          originY: 'center',
          overlayX: 'start',
          overlayY: 'center',
        },
        {
          panelClass: 'custom-panel3',
          originX: …

我试图在拖动 cdkDropList 项目时提供滚动。截至目前，页面无法在不使用鼠标滚轮滚动的情况下滚动。我希望能够根据拖动列表项来滚动页面。谷歌搜索后，它看起来直到几个月前才可能？！

我在 angular material repo 上发现了以下提交：https : //github.com/crisbeto/material2/commit/b4be85f6716a2d1a432ef7109aa06e7255324222

但在角度材料网站上没有找到任何文档。我很好奇自发布以来是否有人使用 Angular Material 在 CdkDropList 元素上实现了任何自动拖动滚动。我对角度比较新。我已尝试将 cdkScrollable 标记添加到 div，但在拖动列表中的任何元素时能够使自动滚动功能工作。

想法/建议？

我想使用overlay.position().flexibleConnectedTo()配置覆盖，因为根据官方文档，connectedTo()已被弃用。否则有一个问题对connectedTo()有一个很好的答案

这是我的代码

    const origin:FlexibleConnectedPositionStrategyOrigin=this.RefElem;
    const overlayConfig = new OverlayConfig();
    overlayConfig.positionStrategy = this.overlay.position().flexibleConnectedTo(origin);
    const overlayRef = this.overlay.create(overlayConfig);
    const userProfilePortal = new ComponentPortal(
      GraphMetaSignalSelectorComponent
    );
    overlayRef.attach(userProfilePortal);

但出现此错误：“ConnectedToFlexibleConnectedPositionStrategy：至少需要一个位置。在FlexibleConnectedPositionStrategy.push”

我正在使用 cdk 拖放库来拖放对象。

我的问题是我无法获取被丢弃对象的数据（对象信息：名称和 ID）。

我试过使用，console.log (event.item.data)但它给出了未定义的。

有谁知道我如何获取有关已删除元素的信息？

谢谢

Stackblitz - 演示

.ts

 drop(event: CdkDragDrop<string[]>) {
    console.log(event.item.data)
    if (event.previousContainer === event.container) {
      moveItemInArray(
        event.container.data,
        event.previousIndex,
        event.currentIndex
      );
    } else {
      transferArrayItem(
        event.previousContainer.data,
        event.container.data,
        event.previousIndex,
        event.currentIndex
      );
    }
  }

html

<div class="six" style=" height: 75%;">
  <div class="card-deck cardsZone">
    <div class="card myCards">
      <div class="card-body" style="overflow-y: auto;"  #activeList="cdkDropList"
      class="box-list" style="height:100%"
      cdkDropList
      cdkDropListOrientation="vertical"
      [cdkDropListData]="A"
      [cdkDropListConnectedTo]="[inactiveList]"
      (cdkDropListDropped)="drop($event)">
        <div *ngFor="let nw of A" cdkDrag>
        <div class="card mysmallCcards">             
          <div class="card-body">
                   <span>{{nw.name}}</span>         
          </div>
        </div>
        </div>
      </div> …