如果你想得到一个引用到嵌入内容的组件，你可以用途：

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

如果 Package <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);
    }
}

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

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

class SomeDir implements AfterContentInit {

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

  ngAfterContentInit() {
    // contentChildren is set
  }
}

请注意，如果您执行console.log（contentChildren），它将仅对ngAfterContentInit或更高的事件起作用。

早上好，
我一直在做一些关于这个主题的研究，因为在我的项目中发生过类似的事情。我发现有两个装饰器可以帮助你解决这个问题：ViewChildren和ContentChildren.主要根据我在网络中发现的区别是ViewChildren访问组件内部，ContentChildren访问DOM或组件本身。
要从ng-content访问upper元素，您必须更改upper元素，使其如下所示：

<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

您还可以使用TemplateRef，这是我最后使用的方法，因为我使用了一个服务来初始化组件。

英寸your-component.component.html

<!-- Modal Component & Content -->
<ng-template #modal>
  ... modal content here ...
</ng-template>

英寸your-component.component.ts

@ViewChild('modal') modalContentRef!: TemplateRef<any>;
... pass your modalContentRef into your child ...

......对我来说，服务就是中间人-- [未显示]......

英寸modal.component.html

<div class="modal-container">
    <!-- Content will be rendered here in the ng-container -->
    <ng-container *ngTemplateOutlet="modalContentRef">
    </ng-container>
</div>

英寸modal.component.ts

@Input() modalContentRef: TemplateRef<any> | null = null;

这就是我最终使用TemplateRef解决问题的方式，因为ng-content无法使用，因为服务正在创建模态