Me gustaría envolver el texto seleccionado en un paragrama div con un componente personalizado.
Sé que podemos envolver texto en etiquetas <span> , <b> , etc. usando:
let selection = window.getSelection(); let range = selection?.getRangeAt(0); let selectedText = selection?.toString(); range.insertNode(document.createTextNode(`<span>${selectedText}</span>`)); Pero, ¿cómo envolver un componente personalizado de angular? Digamos que tenemos un componente SpecialComponent con el selector como <app-special>
Entonces DOM debería ser algo como:
Lorem Ipsum ha sido el texto ficticio estándar de la industria
<app-special>desde</app-special>el siglo XVI, cuando un impresor desconocido tomó una galera de tipos y la codificó para hacer un libro de muestras tipográficas.
Digamos que su componente personalizado SpecialComponent tiene una entrada que toma un parámetro de cadena customSentence , luego se pasa una oración de cadena al componente de la siguiente manera:
Lorem Ipsum has been the <app-special [customSentence]="'industry's standard dummy text ever since'"> </app-special> the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.Dentro de su componente personalizado, cree un decorador de entrada para recibir la oración y un captador de la siguiente manera:
private _customSentence: string = ''; ... @Input() set customSentence(value: string) { this._customSentence = value; } get customSentence() { return this._customSentence; }Su plantilla HTML de componente personalizado será:
<span>{{customSentence}}</span>Esto será suficiente para representar su componente personalizado dentro de otro componente.