angular / angular/components

bug(CdkPortalOutlet): Component can be rendered outside CdkPortalOutlet

Offen
#26,187 0 Kommentare 8 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
area: cdk/portal P3
Vorherrschende Sprache
TypeScript
Sterne
25k
Forks
6.8k
Ø Merge
1 T. 8 Std.
Gemergte PRs (30 T.)
91

Beschreibung

### Is this a regression?

- [ ] Yes, this behavior used to work in the previous version

### The previous version in which this bug was not present was

_No response_

### Description

If you have ComponentPortal with provided ViewContainerRef NgForOf can rerender component outside CdkPortalOutlet.
Looks like [this code](https://github.com/angular/components/blob/7a24e95bafbdeb697f74a48e275c2442bcbefc74/src/cdk/portal/portal-directives.ts#L166) is executed only once and after NgForOf dom manipulations there is nothing that can move ComponentPortalExample to expected position

### Reproduction

[Demo](https://stackblitz.com/edit/angular-ivy-lthq8f?file=src%2Fapp%2Fportal.component.ts,src%2Fapp%2Fapp.module.ts,src%2Fapp%2Fapp.component.html)

Steps to reproduce:
1. Wait until component outlet will render component
2. Drag Item 1 down
3. Drag Item 1 up
4. ComponentPortalExample is rendered inside item list instead of inside component outlet
instead

### Expected Behavior

ComponentPortalExample should stay inside CdkPortalOutlet

### Actual Behavior

ComponentPortalExample is rendered inside item list instead of inside CdkPortalOutlet

### Environment

![image](https://user-images.githubusercontent.com/21180501/205888660-85a14f18-8501-4d2f-ba01-6c561bfb8500.png)

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Beginne mit src/cdk/portal/portal-directives.ts am verlinkten Code und reproduziere das Problem mit der bereitgestellten StackBlitz-Demo. Untersuche die Wechselwirkung zwischen ComponentPortal, dem bereitgestellten ViewContainerRef und der DOM-Neuordnung durch NgForOf; abgeschlossen ist die Arbeit, wenn ComponentPortalExample nach dem Herunterziehen und anschließenden Wiederhochziehen von Item 1 innerhalb von CdkPortalOutlet verbleibt.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
angular, typescript
Bereich
frontend
Issue-Typ
Bug
Schwierigkeit
3/5
Geschätzter Aufwand
1-2 Tage
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
45/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.