wake-up-neo.com

winkel 2 Zugriff auf ng-Inhalt innerhalb einer Komponente

Wie kann ich innerhalb der Komponentenklasse auf das " content " einer Komponente zugreifen?

Ich möchte so etwas machen:

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

Wie kann ich den Inhalt oder das obere Tag in meiner Komponente erhalten, wie ich @Input für Attribute verwenden würde?

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

PS: Ich weiß, dass ich Pipes für die Umwandlung in Großbuchstaben verwenden könnte. Dies ist nur ein Beispiel. Ich möchte keine übergeordnete Komponente erstellen. Ich weiß nur, wie der Inhalt der Komponente mit der Komponentenklasse aufgerufen wird.

22
Daniel Kobler

Sie müssen dafür den @ContentChild-Dekorator einsetzen.

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

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

Bearbeiten

Ich habe Ihr Problem etwas genauer untersucht und es ist nicht möglich, @ContentChild hier zu verwenden, da Sie kein inneres DOM-Wurzelelement haben.

Sie müssen das DOM direkt nutzen. Hier ist eine funktionierende Lösung:

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

Weitere Informationen finden Sie in diesem Dokument: https://plnkr.co/edit/KBxWOnyvLovboGWDGfat?p=preview

15

Wenn Sie einen Verweis auf eine Komponente des übermittelten Inhalts erhalten möchten, können Sie Folgendes verwenden:

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

Wenn Sie <ng-content> wickeln, können Sie auf den übertragenen Inhalt zugreifen, z

@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

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

class SomeDir implements AfterContentInit {

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

  ngAfterContentInit() {
    // contentChildren is set
  }
}

Beachten Sie, dass das Ausführen von console.log (contentChildren) nur bei ngAfterContentInit oder einem späteren Ereignis möglich ist.

0
alansiqueira27