Блог

У меня есть два компонента. Давайте назовем их hostComponent и TextComponent. Я хочу спроецировать некоторый контент внутри textContent, и мне нужно изменить проецируемый контент в соответствии с некоторыми другими входными свойствами.

 lt;app-text-component characterCount='5'gt;  lt;spangt; Hello World lt;/spangt; lt;/app-text-componentgt;  

В приведенном выше примере кода этот компонент должен отображать «Привет», так как количество символов, переданных этому компоненту, имеет значение 5.

Как обрезать проецируемое содержимое только до n символов и отобразить то же самое, где n-значение входного свойства characterCount?

Вы можете использовать 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);  

вы можете удалить элемент или изменить элемент в своем текстовом компоненте следующим образом.

Вы должны использовать объектную переменную для обмена информацией между обоими компонентами. Таким образом, вы можете изменить любой объект свойств в любом компоненте и наблюдать за изменениями, отраженными в обоих компонентах. Если вы используете простую переменную, вы не можете использовать двустороннюю привязку данных. Сказал, что… ты можешь это сделать:

Родительский компонент:

 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;