小编phe*_*lhe的帖子

我发现了这个使用 angular cdk 将拖放添加到 mat-table 的 stackblitz 示例。但是，所需的行为是该行只能使用带有 cdkDragHandle 指令的元素拖动。在此示例中，您可以通过单击行上的任意位置来拖动元素。如何修改这一点，以便该行只能使用拖动手柄拖动？

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

Here is an example of an angular-material color palette

$bv-brand: (
    50: #ffffff,
    100: #dde6f3,
    200: #b4c9e4,
    300: #7fa3d1,
    400: #6992c9,
    500: #5282c1,
    600: #4072b4,
    700: #38649d,
    800: #305687,
    900: #284770,
    A100: #ffffff,
    A200: #dde6f3,
    A400: #6992c9,
    A700: #38649d,
    contrast: (
        50: $black-87-opacity,
        100: $black-87-opacity,
        200: $black-87-opacity,
        300: $black-87-opacity,
        400: $black-87-opacity,
        500: white,
        600: white,
        700: white,
        800: white,
        900: white,
        A100: $black-87-opacity,
        A200: $black-87-opacity,
        A400: $black-87-opacity,
        A700: white,
    )
);

I know that the values 50-900 are used for …

我有一个带有多个表的 cdkDropListGroup（使用 mat-table 指令），我试图设置拖放，以便可以重新排列表中的元素或将其拖到另一个表中。但是，当重新实例化拖放列表的数据时，该项目不会拖动，并且会在控制台中记录错误。这是一个重新创建问题的堆栈闪电战。尝试在表格之间或表格内拖动行几次，应该会出现错误并且拖放应该每隔几次尝试就会卡住。如何解决这个问题，因为在我的实际代码中，这些数据来自某个 http 服务并且必须重新实例化，并且每次将项目拖放到新位置时都必须重新填充表？

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

这是我看到的错误。

    zone.js:192 Uncaught TypeError: Cannot read property '_getSiblingContainerFromPosition' of undefined
    at DragRef._updateActiveDropContainer (drag-ref.ts:727)
    at SafeSubscriber.DragRef._pointerMove [as _next] (drag-ref.ts:505)
    at SafeSubscriber.__tryOrUnsub (Subscriber.ts:270)
    at SafeSubscriber.next (Subscriber.ts:212)
    at Subscriber._next (Subscriber.ts:141)
    at Subscriber.next (Subscriber.ts:101)
    at Subject.next (Subject.ts:68)
    at HTMLDocument.handler (drag-drop-registry.ts:127)
    at ZoneDelegate.invokeTask (zone.js:421)
    at Zone.runTask (zone.js:188)
        DragRef._updateActiveDropContainer @ drag-ref.ts:727
        DragRef._pointerMove @ drag-ref.ts:505
        SafeSubscriber.__tryOrUnsub @ Subscriber.ts:270
        SafeSubscriber.next @ Subscriber.ts:212
        Subscriber._next @ Subscriber.ts:141
        Subscriber.next @ Subscriber.ts:101
        Subject.next @ Subject.ts:68
handler @ drag-drop-registry.ts:127
        ZoneDelegate.invokeTask @ zone.js:421
        Zone.runTask @ …

使用Autofac考虑以下代码：

 Builder.RegisterType<SecurityCache>().As<ISecurityCache>()
    .WithParameter("id", AppId).SingleInstance()

SecurityCache有3个参数，其中两个由DI容器处理，然后使用来指定“ id”参数WithParameter。如何使用.NET Core DI而不是使用Autofac做到这一点？

我想要做

services.AddSingleton<ISecurityCache, SecurityCache>(); 

但是我不确定如何指定id参数。

我有一个mat-expansion-panel，当单击mat-expansion-panel-header时会打开。有没有办法禁用此行为？我想使用其打开方法在其他位置打开扩展面板，并通过单击标题禁用打开它的功能。

在角材步进器组件中，每个步骤都由一个圆圈图标表示。此圆圈的背景色设置为主题的原色。是否可以将此颜色更改为主题的强调色？我尝试color="accent"在mat-horizontal-stepper组件和每个mat-step组件上都进行设置，但是都没有任何作用，并且在文档中看不到颜色输入。

我在扩展面板标题中有一个复选框，出于可访问性的原因，该复选框需要对仅使用键盘的用户起作用。但是，如果您使用 Tab 键将焦点放在复选框上，按空格键或 Enter 键不会选中/取消选中复选框，而是会展开面板。我正在努力解决这个问题，因为这些是有角度的材料组件，我不确定它们在引擎盖下是如何工作的。

如何允许使用键盘选中/取消选中复选框？

这里有一些 html 展示了渲染时的问题：

<mat-expansion-panel>
  <mat-expansion-panel-header>
    <mat-checkbox color="primary">Label</mat-checkbox>
  </mat-expansion-panel-header>
  Content
</mat-expansion-panel>

这是一个演示，如果您按空格键选择复选框或输入不会选中/取消选中它。

https://stackblitz.com/edit/angular-4rmq9v

我试图更好地理解自定义指令，因此我正在遵循有关如何构建自定义属性指令的教程。但是，即使我确定我完全按照本教程进行操作，但是当我将指令设置为模板中的值时，它仍会返回为undefined。

这是使用的模板：

<div [appHighlight]='blue'>
 TESTING TESTING TESTING
</div>

这是自定义指令的代码，该指令在鼠标悬停时使颜色变为绿色，而不是模板中指定的蓝色。

import { Directive, Input, ElementRef, HostListener } from '@angular/core';

@Directive({
  selector: '[appHighlight]'
})
export class ColorDirective {
  @Input('appHighlight') hightlightColor: string;

  element: ElementRef;
  constructor(private el: ElementRef) {
   }

   @HostListener('mouseenter') onMouseEneter() {
     console.log(this.hightlightColor); //coming back as undefined
     this.hightlight(this.hightlightColor || 'green');
   }

   @HostListener('mouseleave') onmouseleave() {
     this.hightlight(null);
   }

   private hightlight( color: string) {
     this.el.nativeElement.style.color = color;
   }
}