angular 2 在组件中访问 ng-content

Question

如何从组件 class 本身访问组件的“内容”？

我想做这样的事情：

<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: 我知道我可以使用管道进行大写转换，这只是一个例子，我不想创建上层组件，只知道如何从 with 访问组件的内容组件 class.

Answer 1

您需要为此利用 @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

Answer 2

如果您想获得对嵌入内容的组件的引用，您可以使用：

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

Answer 3

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

class SomeDir implements AfterContentInit {

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

  ngAfterContentInit() {
    // contentChildren is set
  }
}

请注意，如果您执行 console.log(contentChildren)，它只会在 ngAfterContentInit 或更晚的事件上起作用。

Answer 4

早上好，

我一直在研究这个话题，因为在我的项目中发生过类似的事情。我发现有两个装饰器可以帮助您解决此问题：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

angular 2 在组件中访问 ng-content

angular 2 access ng-content within component

javascript

typescript

angular2-directives

angular