html - Flytta komponenter med bindningar utanför deras förälder

I mitt projekt arbetar jag med att styla några överlägg. På grund av den nästlade komponentstrukturen stöter jag på vissa problem här. Den avsedda lösningen är att flytta överlägget någonstans närmare appens rot samtidigt som datalänkningarna bevaras, vilket gör CSS-stylingen mindre begränsad.

Jag har lyckats sätta upp en prototyp med Renderer2.appendChild(...). När överlägget visas, lägger ngOnInit för överlägget till överlägget till ett annat DOM-element.

Med min nuvarande kod kan jag antingen få in- eller utgångsbindingen att fungera (men inte båda), baserat på att jag flyttar en tom kommentar <!----> som finns direkt framför överlägget.

Enligt min förståelse (Tomma kommentarer i Angular-applikation) behöver Angular denna kommentar, men Renderer2.appendChild tar inte hänsyn till det (kanske är det inte avsett att användas för komponenter, bara för 'rå' HTML?).

Demo:

Här är prototypen som visar båda problemen jag fastnat på: https://stackblitz.com/edit/angular-pg24om

Synligheten för överläggen (visas under etiketterna) kan växlas med en knapp. Skicka-knapparna inuti överlägget loggar inmatningen till konsolen med en @Output händelsesändare. Att trycka på ändra text ändrar en @Input egenskap.

  1. Utan att flytta överlägget fungerar in- och utgångsbinding som förväntat.

  2. Felaktig inmatningsbindning: Om jag väljer att flytta den tomma <!----> kommentaren tillsammans med överlägget verkar min inmatningsbindning sluta fungera. Att trycka på Byt text ändrar inte det slumpmässiga tal jag skickar till komponenten. Utmatningsbindningen fungerar fortfarande bra i detta scenario.

  3. Felaktig borttagning: Om jag inte flyttar den tomma kommentaren misslyckas Angular med att rensa komponenten när synligheten är dold med Toggle visiblity-knappen. Det sagt, medan komponenten är aktiv förblir både input- och output-bindning funktionell.

Om någon vet hur man får detta att fungera, skulle jag uppskatta lite hjälp. Jag såg andra metoder för att skapa överläggningar med hjälp av fabriksupplösare och att lossa vyer, men att kunna flytta komponenten samtidigt som bindningarna i HTML-mallen bevaras kommer att spara oss mycket tid som annars skulle gå åt till att ändra många komponenter.

Redigera: Jag glömde att nämna att felet Error: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node. uppstår när man försöker ta bort överlägget utan den flyttade kommentaren. Angular försöker ta bort ett #comment-element från överlägget, men det misslyckas eftersom kommentaren fortfarande finns i div:en där överläggsmallen är placerad. Det är därför jag försökte flytta kommentaren tillsammans med överlägget.