angular / angular/components

bug(CdkPortalOutlet): Component can be rendered outside CdkPortalOutlet

Abierto
#26,187 0 comentarios 8 reacciones 0 asignados Ver en GitHub
area: cdk/portal P3
Lenguaje dominante
TypeScript
Estrellas
25k
Forks
6.8k
Merge medio
1 d 8 h
PR fusionados (30 d)
91

Descripción

### 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)

Guía de contribución

Abrir la guía de contribución

Línea de trabajo

Comienza con src/cdk/portal/portal-directives.ts en el código enlazado y reproduce el problema usando la demo de StackBlitz proporcionada. Investiga la interacción entre ComponentPortal, el ViewContainerRef proporcionado y la reordenación del DOM de NgForOf; se considera terminado cuando ComponentPortalExample permanece dentro de CdkPortalOutlet después de arrastrar Item 1 hacia abajo y volver a subirlo.

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
angular, typescript
Área
frontend
Tipo de issue
Error
Dificultad
3/5
Tiempo estimado
1-2 días
Estado de actividad
Estancado
Claridad
Bastante claro
Aptitud para principiantes
45/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.