#angular #angular-content-projection
#угловой #проекция углового содержимого
Вопрос:
У меня есть два компонента. Давайте назовем их hostComponent и TextComponent. Я хочу спроецировать некоторый контент внутри textContent, и мне нужно изменить проецируемый контент в соответствии с некоторыми другими входными свойствами.
lt;app-text-component characterCount='5'gt; lt;spangt; Hello World lt;/spangt; lt;/app-text-componentgt;
В приведенном выше примере кода этот компонент должен отображать «Привет», так как количество символов, переданных этому компоненту, имеет значение 5.
Как обрезать проецируемое содержимое только до n символов и отобразить то же самое, где n-значение входного свойства characterCount?
Комментарии:
1. Есть 2 возможных способа. Либо вы создаете канал для его обработки, либо используете интерполяцию, реагирующую внутри вашего компонента на событие ввода. Последнее означает отображение текста с помощью интерполяции и сокращение длины содержимого переменной.
Ответ №1:
Вы можете использовать renderer:Renderer2
и el: ElementRef
в своем конструкторе и изменять lt;ng-contentgt;lt;/ng-contentgt;
значение :
this.span = this.renderer.createElement('span'); this.span.innerHTML = `lt;divgt;Hellolt;/divgt;`; this.renderer.appendChild(this.el.nativeElement.parentElement, this.span); // this.renderer.removeChild(parent, child);
вы можете удалить элемент или изменить элемент в своем текстовом компоненте следующим образом.
Ответ №2:
Вы должны использовать объектную переменную для обмена информацией между обоими компонентами. Таким образом, вы можете изменить любой объект свойств в любом компоненте и наблюдать за изменениями, отраженными в обоих компонентах. Если вы используете простую переменную, вы не можете использовать двустороннюю привязку данных. Сказал, что… ты можешь это сделать:
Родительский компонент:
configObject = { count: 5, text: 'hello world' }.
Шаблон
lt;app-text-component config-object='configObject'gt;lt;/app-text-componentgt;
Дочерний компонент
Тогда… В вашем дочернем компоненте вы можете использовать функцию для возврата обрезанного текста:
@Input() configObject: object; trimText() { return this.configObject.text.substring(0, this.configObject.count); }
Шаблон
lt;spangt;{{ trimText() }}lt;/spangt;