Angular 2 доступ к ng-содержимому в компоненте

Как я могу получить доступ к "контенту" компонента из самого класса компонента?

Я хотел бы сделать что-то вроде этого:

<upper>my text to transform to upper case</upper>

Как получить контент или верхний тег в моем компоненте, как я бы использовал @Input для атрибутов?

@Component({
    selector: 'upper',
    template: `<ng-content></ng-content>`
})
export class UpperComponent {
    @Input 
    content: String;
}

ps: Я знаю, что я мог бы использовать каналы для преобразования верхнего регистра, это только пример, я не хочу создавать верхний компонент, просто знаю, как получить доступ к содержимому компонента из класса компонента.

Ответ 1

Для этого вам нужно использовать декоратор @ContentChild.

@Component({
  selector: 'upper',
  template: `<ng-content></ng-content>`
})
export class UpperComponent {
  @Input 
  content: String;

  @ContentChild(...)
  element: any;
}

Edit

Я немного исследовал вашу проблему, и здесь невозможно использовать @ContentChild, так как у вас нет корневого внутреннего элемента DOM.

Вам нужно использовать DOM напрямую. Вот рабочее решение:

@Component({
  selector: 'upper',
  template: `<ng-content></ng-content>`
})
export class UpperComponent {
  constructor(private elt:ElementRef, private renderer:Renderer) {
  }

  ngAfterViewInit() {
    var textNode = this.elt.nativeElement.childNodes[0];
    var textInput = textNode.nodeValue;
    this.renderer.setText(textNode, textInput.toUpperCase());
  }
}

Смотрите этот plunkr для более подробной информации: https://plnkr.co/edit/KBxWOnyvLovboGWDGfat?p=preview

Ответ 2

Если вы хотите получить ссылку на компонент переведенного содержимого, вы можете использовать:

@Component({
    selector: 'upper',
    template: `<ng-content></ng-content>`
})
export class UpperComponent {
    @ContentChild(SomeComponent) content: SomeComponent;
}

Если вы завернете <ng-content>, вы можете получить доступ к трансидированному контенту, например

@Component({
    selector: 'upper',
    template: `
  <div #contentWrapper>
    <ng-content></ng-content>
  </div>`
})
export class UpperComponent {
    @ViewChild('contentWrapper') content: ElementRef;

    ngAfterViewInit() {
      console.debug(this.content.nativeElement);
    }
}