angular 2 access ng-content внутри компонента

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

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

<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: Я знаю, что могу использовать трубы для преобразования верхнего регистра, это только пример, я не хочу создавать верхний компонент, просто знаю, как получить доступ к содержимое компонента из класса component.

20
angular angular2-directives javascript typescript

2 ответов

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

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

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

редактировать

Я исследовал немного больше, и это не возможно, чтобы использовать @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());
  }
}

см. этот планкр для больше деталей:https://plnkr.co/edit/KBxWOnyvLovboGWDGfat?p=preview

14

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

@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);
    }
}
33