标签: angular-cdk

我有以下服务

@Injectable()
export class PService {
   private loadPComponent: ComponentPortal<PComponent>;
   private bodyPortalHost: DomPortalHost;

   constructor(private appRef: ApplicationRef,
               private  componentFactoryResolver: 
                       ComponentFactoryResolver,
               private injector: Injector) {
      this.loadPComponent = new ComponentPortal(PComponent);
   }
   instance(elementRef: Element) {
      this.bodyPortalHost = new DomPortalHost(elementRef, 
           this.componentFactoryResolver, this.appRef, this.injector);
   }
   show() {
      const componentRef: ComponentRef<PComponent> = 
                 this.bodyPortalHost.attach(this.loadPComponent);
   }
   hide() {
      this.bodyPortalHost.detach();
   }
}

因此，我有一个名为“PComponent”的组件，并且从该服务中动态创建该组件，该类有两个方法实例 - 传递调用服务显示的组件的元素 - 附加已“创建”的 PComponent

一切正常，Portal 是一个很棒的解决方案！但我的 PComponent 有一个带有一些变量的 HTML 模板，例如，

{{ 图像URL }}

这应该是一个图像 url 并将该图像显示到 PComponent 中的 div 内容中。 问题 我如何将 imageURL 字符串传递到服务或组件中？

提前致谢

我想使用叠加层angular-cdk将其附加到动态创建的元素上，*ngFor是否可以？

这是示例： https: //stackblitz.com/edit/angular-z4a989 我想用每个按钮打开叠加层，但叠加层应附加到打开的叠加层。是否可以？

我正在实施 Angular 的 CDK 门户来加载动态组件。我能够使用给定的 html 和 app.ts 快速轻松地将组件加载到页面上。

加载组件后，我想访问它的接口方法doSomething()，但是我似乎无法访问已加载的组件。

是否可以访问该组件？

类/接口：

interface IPortalThing {
    doSomething(){...}
}
class PortalThingComponent
class OtherPortalComponent

网址：

<ng-template [cdkPortalOutlet]="portal"></ng-template>

应用程序

portal: Portal<any>;
...

loadComponent() {
    this.portal =  new ComponentPortal(PortalThingComponent));
}

我试图通过以下方式给出类型的指示：

portal: Portal<IPortalThing>;
...

loadComponent() {
    this.portal =  new ComponentPortal<IPortalThing>(PortalThingComponent));
}

但是，由于以下错误，这样做使我无法设置 this.portal：

Type 'ComponentPortal<IPortalThing>' is not assignable to type Portal<IPortalThing>'.

这让我感到困惑。

我想在特定组件上覆盖 CDK。我使用flexibleConnectedTo()将覆盖的内容部分正确定位在组件上。我不知道如何让叠加背景只覆盖组件而不是整个页面。该cdk-overlay-container班有CSS作为

pointer-events: none;
top: 0;
left: 0;
height: 100%;
width: 100%;

我知道我可以覆盖 CSS，但是我正在寻找一种 Angular CDK 方式来调整大小cdk-overlay-container以适应组件的边界。

我通读了文档，但是我没有看到这样做的方法。我从文档中遗漏了什么吗？

在我的 Angular 拖放下拉列表中，我想向“[cdkDropListEnterPredicate]”函数传递一个额外的参数。默认情况下，它发送一个 CdkDrag 和 CdkDropList，但我有几个下拉列表，所以我只想要一个输入谓词函数。这是我的 .html 文件：

<div class="players" [cdkDropListEnterPredicate]="filledPosition(drag, drop, '1')"
    cdkDropList #fwdLine1="cdkDropList" [cdkDropListData]="f1" 
    [cdkDropListConnectedTo]="[forwardPlayers]" 
    (cdkDropListDropped)="drop($event)">

    <div *ngFor="let fwd of f1" cdkDrag [cdkDragData]="fwd">
        <div class="player">
            <span>{{fwd.number}} {{fwd.name}} {{fwd.position}}</span>
        </div>
    </div>
</div>

这是 .ts 文件中的函数：

filledPosition = (item: CdkDrag<Skater>, list: CdkDropList, line) => {

    if (line == "1") checkLine = this.f1;

    console.log(item, list, line)

    if (checkLine.length >= 3) {
        return false;
    }

    return true;

}

我有一个<div>元素具有position: absolute与容器内position: relative。它的left和top属性绑定到component.ts. 我的目的是使用 cdk 拖放移动容器内的 div。

在dragEnded我检索需要更新坐标 X 和 Y 的数据时，问题就开始了......

<div
    class="character"
    [style.left.px]="x"
    [style.top.px]="y"
    cdkDrag
    cdkDragBoundary=".grid-container"
    (cdkDragEnded)="dragEnded($event, c)"
  ></div>

我注意到 cdk 拖放应用了一个属性transform: translate3d(x,y,z)来移动我的 div，从它的原始位置开始。所以，如果我希望我的 div left 和 top 绑定到我的后端属性，我可以在 dragEnd 事件上计算新坐标，应用它们，并重置由 cdk 制作的变换属性。一切正常。

但是下次我拖动元素时，材质不会从我的 div 的新绝对位置开始应用变换，而是从原始位置开始。

我认为一种解决方案可能是检查是否CdkDragEnd event包含与转换起点相关的数据并重置它，但我没有找到任何东西。

知道这个属性是否隐藏在 CdkDragEvent 中的某个地方吗？或者对这个问题有其他解决方案吗？

谢谢你们

介绍

我有一个待办事项列表，它利用 Angular Material 的cdkDrag指令来处理cdkDropList. 将项目标记为“待办事项”或“已完成”，反之亦然，非常简单。

问题

用户交互中有一定程度的细节，即页面刷新，这会导致项目不一定按照拖动的顺序排列。

以这个例子为例，用户被分配了 3 个任务：吃早餐、吃午餐、吃晚餐：

用户不喜欢这种优先级，并决定按此顺序处理他/她的饮食任务。发生拖放交互，待办事项列表最终确定为：

页面刷新时，这就是问题出现的地方。它会返回到原始状态：

吃早餐，吃午餐，吃晚餐

当它明确应该是：

吃晚餐，吃早餐，吃午餐

这一观察结果对于标记为已完成的项目也同样适用。

我需要确认此交互的当前状态，缺少什么？请注意，此实现基于如何使用 Angular 拖放构建应用程序

谢谢你的时间。

使用此命令安装FlexLayout后

npm i -s @angular/flex-layout @angular/cdk

显然Angular CDK也安装了，我收到以下警告

The Angular Material version (12.1.4) does not match the Angular CDK version (12.2.1).
Please ensure the versions of these two packages exactly match.

我使用ng update命令来更新软件包，也尝试过ng add @angular/material，但我仍然使用相同的版本。

我该如何解决这个问题？

解决方案

命令ng add @angular/material和ng add @angular/material@latest工作正常，我检查了package.json文件并注意到我有

"dependencies": {
    ...
    "@angular/material": "^12.2.1"
    ... 
}

它只是需要ng serve再次。

还有一件事，更新似乎并Angular Material没有真正覆盖styles.scss文件，但实际上再次将相同的代码添加到文件中，所以我也必须删除它才能摆脱 scss 错误。

所以我在为 Angular 4 应用程序进行单元测试时遇到了这个问题

发生的情况是它不断给出问题标题中所述的错误。

我尝试用谷歌搜索它，尝试导入一大堆不同的模块，最后发现这个“平台”的接近答案可能是@angular/browser平台中的 browserModule 。

因此，在我的单元测试中，我尝试导入它并声明它，但没有帮助。

任何人都可以帮忙解决这个问题，因为我什至不确定这个“平台”是什么？

问题：错误中的这个“平台”到底是什么以及如何修复它？

谢谢。

我已附上我的代码如下：

import { ComponentFixture, TestBed, async} from "@angular/core/testing";
import { DebugElement, CUSTOM_ELEMENTS_SCHEMA, PlatformRef} from 
"@angular/core";
import { TeamCreationAssignmentComponent } from "./team-creation-assignment.component";
import { OdmService } from "../../services/odm/odm.service";
import { UserNotificationService } from "../../services/user/user-notification.service";
import { MatSnackBar } from "@angular/material";
import { OVERLAY_PROVIDERS, ScrollStrategyOptions, ScrollDispatcher} from "@angular/cdk/overlay";

describe('Team creation assignment component', () => {
let comp: TeamCreationAssignmentComponent;
let fixture: ComponentFixture<TeamCreationAssignmentComponent>;

let odmServiceSub = {};


beforeEach(async(() => { …

所以我想用 Angular 制作我的战舰游戏版本，为此我需要一个 10x10 矩阵，我可以在其中拖放船只（如果你玩过游戏，你知道我在说什么）并且我正在使用Angular Cdk，但我根本无法让它工作。

到目前为止我所尝试的是用 div 制作一个表格，将元素放在一边并将它们拖放到板上，但我无法连接两个数组，因为船只数组不是嵌套的，而板是嵌套的。

编辑：这是 stackblitz 示例的链接：https ://stackblitz.com/edit/angular-pp24ad

值得注意的是，矩阵中充满了 IBox，这将有助于稍后的游戏实现。我不确定是否必须更改船舶的数据结构。例如，作为另一个矩阵，我从中获取船只并转移到棋盘上，但我仍然无法弄清楚拖动。我仍然不确定这是解决这个问题的最好方法，所以我愿意改变解决问题的方法。

我的 Angular 9 项目出现问题，其中拖放功能无法始终如一地工作。每当我尝试将对象拖到其目标位置时，拖放永远不会完成。大多数情况下，对象会返回其原始位置，或者在我要将对象移动到的目标位置之前或之后移动到另一个位置。这是我的代码：

<div class="col-sm-12">

          <div cdkDropList class="example-list cdk-drop-list-receiving" (cdkDropListDropped)="drop($event)">
            <ng-container *ngFor="let word of Words; let i = index;">
                <div class="row" *ngIf="((i % 2) == 0)"  style="margin-right: 0px; margin-left: 0px;" >
                  <div class="col-sm-1 text-center" style="padding: 20px 10px; border: 1px solid black"> {{ i }}</div>
                  <div class="col-sm-5 text-center example-box"  style="border: 1px solid black" cdkDrag ><div class="example-custom-placeholder" *cdkDragPlaceholder></div>{{ Words[i].Title }}</div>
                  <div class="col-sm-1 text-center" style="padding: 20px 10px; border: 1px solid black"> {{ i+1 }}</div>
                  <div class="col-sm-5 text-center example-box" *ngIf="Words[i+1] !== undefined" style="border: …

我有一个自定义的 angular 文件上传组件，我想使用Angular CDK 拖放。它看起来不错，但是当我尝试实现它来处理文件上传（您将文件拖入拖放区）时，它似乎不起作用，浏览器在新选项卡中打开文件。

我现在拥有的看起来像这样：

<label cdkDropList (cdkDropListDropped)="handleFileDrop($event)">
    <span>Drop file here</span>
    <input #fileInput type="file" multiple="false" (change)="addFiles(fileInput.files">
</label>

所以我的问题是，我可以使用 Angular CDK 拖放库执行 FileUploads，如果可以，我在这里缺少什么？

我已经在我的应用程序中实现了文档 ( doc ) 中的CDK 菜单。

这是我所做的：

1. 安装CDK：
   npm i @angular/cdk

2. 导入菜单 cdkapp.module.ts并在“导入”部分使用它：
   import { CdkMenuModule } from '@angular/cdk/menu'
imports: [BrowserModule, CdkMenuModule]

3. 在我的中创建菜单app.component.html

   <button [cdkMenuTriggerFor]="menu" class="example-standalone-trigger">Click me!</button>
   <ng-template #menu>
     <div class="example-menu" cdkMenu>
       <button class="example-menu-item" cdkMenuItem>Refresh</button>
       <button class="example-menu-item" cdkMenuItem>Settings</button>
       <button class="example-menu-item" cdkMenuItem>Help</button>
       <button class="example-menu-item" cdkMenuItem>Sign out</button>
     </div>
   </ng-template>
   <hello-world></hello-world>
   

   Run Code Online (Sandbox Code Playgroud)

问题是，当我单击按钮时，菜单会在页面底部打开，而不是在按钮下方打开。

这是显示问题的 Stackblitz： https: //stackblitz.com/edit/f1y9wh
我已经按照文档中的这个示例进行操作（他们的 stackblitz 工作正常）：menu-with-standalone-trigger