web-dev-qa-db-fra.com

contenu angulaire à 2 accès au sein du composant

Comment puis-je accéder au " contenu " d'un composant à partir de la classe de composants elle-même?

J'aimerais faire quelque chose comme ça:

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

Comment puis-je obtenir le contenu ou la balise supérieure dans mon composant, comme je le ferais avec @Input pour les attributs?

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

PS: Je sais que je pourrais utiliser des tubes pour la transformation en majuscule. Ce n’est qu’un exemple. Je ne souhaite pas créer de composant supérieur, je sais juste comment accéder au contenu du composant à partir de la classe de composants.

javascripttypescriptangularangular2-directives
22
Daniel Kobler

Vous devez utiliser le décorateur @ContentChild pour cela.

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

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

Modifier

J'ai étudié un peu plus votre problème et il n'est pas possible d'utiliser @ContentChild ici car vous n'avez pas d'élément racine interne DOM.

Vous devez exploiter directement le DOM. Voici une solution de travail:

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

Voir ce dossier pour plus de détails: https://plnkr.co/edit/KBxWOnyvLovboGWDGfat?p=preview

15
Thierry Templier

Si vous souhaitez obtenir une référence à un composant du contenu inclus, vous pouvez utiliser:

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

Si vous enveloppez <ng-content>, vous pourrez accéder au contenu inclus comme

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

    ngAfterViewInit() {
      console.debug(this.content.nativeElement);
    }
}
37
Günter Zöchbauer

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

class SomeDir implements AfterContentInit {

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

  ngAfterContentInit() {
    // contentChildren is set
  }
}

Notez que si vous utilisez console.log (contentChildren), cela ne fonctionnera que sur ngAfterContentInit ou un événement ultérieur.

0
alansiqueira27