javascript - navigationend - router events subscribe angular 4

angular 2 acceso ng-contenido dentro del componente

Question

¿Cómo puedo acceder al " contenido " de un componente desde la propia clase de componente?

Me gustaría hacer algo como esto:

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

¿Cómo puedo obtener el contenido o la etiqueta superior dentro de mi componente como si usara @Input para atributos?

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

PD: Sé que podría usar tuberías para la transformación de mayúsculas, esto es solo un ejemplo, no quiero crear un componente superior, solo sé cómo acceder al contenido del componente con la clase de componente.

Answer 1

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

class SomeDir implements AfterContentInit {

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

  ngAfterContentInit() {
    // contentChildren is set
  }
}

Tenga en cuenta que si realiza console.log (contentChildren), solo funcionará en ngAfterContentInit o en un evento posterior.

Answer 2

Necesitas aprovechar el decorador @ContentChild para esto.

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

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

Editar

Investigué un poco más tu problema y no es posible usar @ContentChild aquí ya que no tienes un elemento DOM interno raíz.

Necesitas aprovechar el DOM directamente. Aquí hay una solución de trabajo:

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

Consulte este plunkr para obtener más detalles: https://plnkr.co/edit/KBxWOnyvLovboGWDGfat?p=preview

Answer 3

Si desea obtener una referencia a un componente del contenido transcluido, puede utilizar:

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

Si envuelve <ng-content> , puede acceder al acceso al contenido transcluido como

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

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