我发布这个问题只是为了自己回答，以防有人像我一样挣扎！

我正在开发一个 angular 项目来实现一个类似 Trello 的应用程序。我希望能够将一个元素从一个列表拖到另一个列表中，所以我安装了 Angular cdk 模块并遵循了他们的指南。

注意：我的应用程序被分成几个页面/组件，我正在实现该接口 (Trello) 的页面被称为BoardPageComponent。

首先，我添加了cdkDrag指令，元素变得可拖动，这是一个好的开始！

然后我将cdkDropList指令添加到父元素，子元素仍然可以拖动，但它们的样式在拖动时不再起作用！

解决方案

当在 a 内部拖动元素时cdkDropList，DragAndDropModule会创建该元素的副本，但位于文档的正文级别。因此，如果您的组件被封装，那么它的样式将不适用！

解决方案 1：一种快速解决方案是移动该可拖动元素的样式并将其放入全局样式文件中。

解决方案 2：另一种解决方案是禁用该组件的封装ViewEncaplusation.None：

@Component({
  selector: 'app-board-page',
  templateUrl: './board-page.component.html',
  styleUrls: ['./board-page.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class BoardPageComponent implements OnInit, OnDestroy {
  ....
}

这会起作用，但您应该意识到这可能会将某些样式泄露给应用程序的其他组件。所以一定要手动封装组件的样式。

或者也许有另一种方式？

我安装了 Angular CDK 以便使用 PrimeNG 的下拉组件，但它会引发错误。

我在 app.module.ts 中添加了这个：

import {DropdownModule} from 'primeng/dropdown';

只需输入以下内容即可安装 Angular CDK：

npm install @angular/cdk --save

使用 CDK 自动调整虚拟滚动策略保持滚动位置

我有一个可以与滚动的项的大名单<cdk-virtual-scroll-viewport autosize>提供@angular/cdk-experimental（该项目具有动态的高度，所以我用这个卷轴策略，而不是FixedSizeVirtualScrollStrategy）。

随着时间的推移，新项目被插入到列表中，即它们被附加到顶部。当用户向下滚动时，我想避免新项目将视口中的项目推开。因此，我需要一种机制来在添加项目后保持/恢复滚动位置。

我有一个半有效的解决方案（而且很麻烦，因为它读取私有字段），但是在添加项目后视口会随机移动几个像素。

以下是相关代码部分：

@ViewChild(CdkVirtualScrollViewport) viewport: CdkVirtualScrollViewport;

...

// After new items have been added:

const offset = this.viewport.measureScrollOffset('top');
const topPosition = offset + newItems.length * this.viewport['_scrollStrategy']._averager._averageItemSize; // the autosize strategy determines an average item size I'm trying to use to determine how the viewport should be shifted

this.viewport.scrollTo({
  top: topPosition
});

我在这里创建了这种方法的演示：https : //stackblitz.com/edit/angular-be926g?file=src/app/cdk-virtual-scroll-overview-example.ts

任何想法如何通过恒定视口无缝地实现这一目标？

我需要从门户动态附加和分离一组组件的实例，而无需每次附加时都重新初始化它，因为这会大大降低应用程序的性能。

portal = new ComponentPortal(MyComponent);
this.portalHost = new DomPortalHost(
      this.elementRef.nativeElement,
      this.componentFactoryResolver,
      this.appRef,
      this.injector
    );

const componentRef = this.portalHost.attach(this.portal);
componentRef.instance.myInput = data;
componentRef.instance.myOutput.subscribe(...);
componentRef.changeDetectorRef.detectChanges();

这就是这个问题中解释的方式。但每次重新连接组件时，它都会重新初始化。

我需要得到google.maps.Map。official我在文档中看不到方法。但我看到整个组件是exportedAs. 但是当我在模板中使用它时：

<google-map [center]="{lat: mapaLat, lng: mapaLng}"
                [zoom]="mapaZoom" [options]="{mapTypeControl: true}"
                #mapInstance="googleMap"></google-map>

它是局部变量。如何在我的组件的打字稿中获取它？

或者也许还有其他方法可以得到google.maps.Map？

我有一个 Angular 7 应用程序，使用 CDK Drag-n-Drop 在一个很长的列表中拖放行。

我应该怎么做才能让长列表在拖出当前视图时自动滚动？

我可以参考任何示例代码吗？