angular / angular/components

question(drag-drop): createEmbeddedView for drag preview/placeholder templates

オープン
#20,047 コメント 3 件 リアクション 0 件 担当者 0 名 GitHub で見る
area: cdk/drag-drop P3
主要言語
TypeScript
スター
25k
フォーク
6.8k
平均マージ
1日 8時間
マージ済み PR(30日)
91

説明

A few months back, I opened https://github.com/angular/components/issues/19060 that described a bug with `matchSize` possibly not working correctly due to the preview template being stamped out inside the drop list's view container...and afterward measuring the original drag item.

The solution I proposed in that thread was to just stamp out the preview template view outside of the DOM, so the drop list container children are never touched before being measured.

The fix for this issue was decided to be to measure the original drag item first, then stamp the preview template out in the existing manner in the drop list view container. This works, but the implementation still bugs me because the template is being stamped out in the view container, modifying the DOM, and then the drag preview element is immediately moved to bottom of the document body, modifying the DOM **again** (versus the other solution that only modifies the DOM once). Same idea for the placeholder template as well, how it is placed into the DOM and then immediately moved around (using `replaceChild`)...when it could just be put in the correct place from the start.

@crisbeto made the following comment:
>The idea behind inserting the view through the ViewContainerRef is to ensure that it's inside the same view/DI hierarchy as drag item. I agree that ideally we'd just create the element outside the DOM, but an alternate solution is to measure the element before the preview has been created.

but I am struggling to understand this comment (_"ensure that it's inside the same view/DI hierarchy as drag item"_). As far as I am aware, an injector cannot be specified when using `createEmbeddedView` and the injector used inside the preview template is simply the injector of the component in which the template is **defined**.

Issue about this (still open...) from 3 years ago:
https://github.com/angular/angular/issues/14935

So what would stamping a template out using
```ts
const viewRef = previewConfig!.viewContainer.createEmbeddedView(previewTemplate, previewConfig!.context);
```
or
```ts
const viewRef = previewTemplate.createEmbeddedView(previewConfig!.context);
```

have anything to do with dependency injection? I feel like the answer is "nothing" but I might be misunderstanding.

@crisbeto can you explain your comment in more detail as to why it is advantageous to use the view container and/or if something I've said above is not accurate?

コントリビューションガイド

コントリビューションガイドを開く

調査の方向性

ここで説明されているドラッグプレビューとプレースホルダー作成のパスから始め、ViewContainerRef.createEmbeddedView と TemplateRef.createEmbeddedView、および既存の測定と reparenting のシーケンスを比較します。完了条件は、DI/ビュー階層の挙動についてメンテナーが確認した説明と、方針が決定されていることです。issue ではファイルもテストも指定されていません。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
angular, typescript
領域
frontend
issue の種類
リファクタリング
難易度
5/5
見積もり時間
1週間以上
活発さ
停滞
明瞭さ
説明が足りない
初心者へのやさしさ
25/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。