- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试使用与 Angular Material 7 相关的拖放功能。
我使用 ngTemplateOutlet
将模板分成可重复使用的部分每个选项都可以是 东西 ™ 或嵌套的 东西 ™ 还有更多子事物 ™。
嵌套 事情 ™ 显示为扩展面板。
我要全部一级事情 ™ 可以像列表一样重新排序。
(好吧,好吧,很明显这是一个带有正常和嵌套选项的可重新排序的sidenav,只是假装它不是那么明显)
这是我最初编写的代码。
<div cdkDropList (cdkDropListDropped)="dropItem($event)" lockAxis="y">
<ng-container *ngFor="let thing of things">
<ng-container
*ngTemplateOutlet="!thing.children ? singleThing : multipleThing; context: { $implicit: thing }"
></ng-container>
</ng-container>
</div>
<ng-template #singleThing let-thing>
<div cdkDrag>
<ng-container *ngTemplateOutlet="thingTemplate; context: { $implicit: thing }"></ng-container>
</div>
</ng-template>
<ng-template #multipleOption let-thing>
<mat-expansion-panel cdkDrag (cdkDropListDropped)="dropItem($event)">
<mat-expansion-panel-header>
<mat-panel-title>
<p>Nested thing title</p>
<span cdkDragHandle></span>
</mat-panel-title>
</mat-expansion-panel-header>
<ng-container *ngFor="let childThing of thing.children">
<div class="childThing">
<ng-container *ngTemplateOutlet="thingTemplate; context: { $implicit: childThing }"></ng-container>
</div>
</ng-container>
</mat-expansion-panel>
</ng-template>
<ng-template #thingTemplate let-thing>
<p>I'm a thing!</p>
<span cdkDragHandle></span>
</ng-template>
ng-template
时遇到了类似的问题回到“HTML 流程”可以解决这个问题,所以我也尝试了同样的方法。
<div cdkDropList (cdkDropListDropped)="dropItem($event)" lockAxis="y">
<ng-container *ngFor="let thing of things">
<ng-container
*ngIf="!thing.children; then singleThing; else multipleThing"
></ng-container>
<ng-template #singleThing>
<div cdkDrag>
<ng-container *ngTemplateOutlet="thingTemplate; context: { $implicit: thing }"></ng-container>
</div>
</ng-template>
<ng-template #multipleOption>
<mat-expansion-panel cdkDrag (cdkDropListDropped)="dropItem($event)">
<mat-expansion-panel-header>
<mat-panel-title>
<p>Nested thing title</p>
<span cdkDragHandle></span>
</mat-panel-title>
</mat-expansion-panel-header>
<ng-container *ngFor="let childThing of thing.children">
<div class="childThing">
<ng-container *ngTemplateOutlet="thingTemplate; context: { $implicit: childThing }"></ng-container>
</div>
</ng-container>
</mat-expansion-panel>
</ng-template>
</ng-container>
</div>
<ng-template #thingTemplate let-thing>
<p>I'm a thing!</p>
<span cdkDragHandle></span>
</ng-template>
ngIf
而不是第一个
ngTemplateOutlet
并删除了
的上下文绑定(bind)东西 ™ 因为现在两个模板都具有其局部变量引用,这要归功于共享范围。
最佳答案
我遇到了同样的问题,我什至将其报告为 issue on GitHub .
原来是cdkDropList
的分离造成的来自 cdkDrag
. cdkDrag
必须在一个标签中,该标签嵌套在带有 cdkDropList
的标签中,否则被拖动的元素不会检测到放置区。
在您的情况下,解决方案将是一个额外的 <div cdkDrag>
下面cdkDropList
,并且只有在此之下,您才能使用 ngTemplateOutlet
调用模板.
关于angular - CdkDragDrop 和 ngTemplateOutlet,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53210886/
所以,我一直在为我的 Angular 应用程序进行单元测试。我正在使用 Angular Material,我有一个使用拖放 CDK 的组件 cdk drag-drop API . html代码是这样的
我正在尝试使用与 Angular Material 7 相关的拖放功能。 我使用 ngTemplateOutlet 将模板分成可重复使用的部分每个选项都可以是 东西 ™ 或嵌套的 东西 ™ 还有更多子
我在看 reorderable columns example在stackblitz上。 特别是我看到了html 我已经在 MytableComponent 中定义了 drop export cla
我是一名优秀的程序员,十分优秀!