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


typescript javascript angular angular2-directives
person Daniel Kobler    schedule 11.04.2016    source источник
comment
Вам нужна строка HTML или ссылка на конкретный компонент, ...?   -  person Günter Zöchbauer    schedule 11.04.2016

Ответы (4)


arrow_upward
27
arrow_downward

Для этого вам нужно использовать декоратор @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());
  }
}

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

person Thierry Templier    schedule 11.04.2016
comment
Что, если включаемый контент не является другим компонентом? Что, если вам просто нужен весь включенный контент в ng-content? - person ykadaru; 10.04.2019

arrow_upward
49
arrow_downward

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

@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);
    }
}
person Günter Zöchbauer    schedule 11.04.2016
comment
Если я заверну его, я должен получить к нему доступ с помощью \ @ViewChild, а не \ @ContentChild? - person Daniel Kobler; 11.04.2016

arrow_upward
1
arrow_downward

https://angular.io/api/core/ContentChildren

class SomeDir implements AfterContentInit {

  @ContentChildren(ChildDirective) contentChildren : QueryList<ChildDirective>;

  ngAfterContentInit() {
    // contentChildren is set
  }
}

Обратите внимание, что если вы выполните console.log (contentChildren), он будет работать только с ngAfterContentInit или более поздним событием.

person alansiqueira27    schedule 28.11.2018

arrow_upward
1
arrow_downward

Доброе утро,

Я провел небольшое исследование по этой теме, потому что нечто подобное случилось со мной в моем проекте. Я обнаружил, что есть два декоратора, которые могут помочь вам в этом решении: ViewChildren и ContentChildren. Разница в основном зависит от того, что я обнаружил в сети, заключается в том, что ViewChildren получает доступ к внутренней части компонента, а ContentChildren получает доступ к DOM или самому компоненту.

Чтобы получить доступ к верхнему элементу из ng-content, вы должны изменить верхний элемент, оставив его следующим образом:

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

А затем просто получить доступ к внутренней части (в компоненте, имеющем ng-content):

  @ViewChildren('upper') upper: QueryList<ElementRef>

И для доступа к компоненту в целом (в компоненте с ng-content):

  @ContentChildren('upper') upper: QueryList<ElementRef>

Откуда вы получили информацию: https://netbasal.com/understanding-viewchildren-contentchildren-and-querylist-in-angular-896b0c689f6e

person IvanAllue    schedule 24.07.2020