Angular 检索组件内部投影到变量中的内容

我试图检索由角度组件投影到typescript变量中的内容

我尝试使用@ViewChild decorator检索内容，并使用console log（）显示内容，但出现错误

以下是我在各种文件中编写的代码：

app.component.html（父组件）

运行此代码时出现以下错误

AppComponent.html:1错误类型错误：无法读取属性 未定义的“nativeElement” 在TestComponent.push../src/app/test/test.component.ts.TestComponent.ngAfterContentInit （试验.部件.ts:16） 在callProviderLifecycles（core.js:18847） 在callElementProvidersLifecycles（core.js:18828） 在callLifecycleHooksChildrenFirst（core.js:18818） 在checkAndUpdateView（core.js:19749）上 在callViewAction上（core.js:19986） 在ExecuteComponentViewsAction（core.js:19928） 在checkAndUpdateView（core.js:19751）中 在callWithDebugContext（core.js:20639） 在Object.debugCheckAndUpdateView[作为checkAndUpdateView]（core.js:20317）

我的问题是如何显示以下内容：

The following data was passed to this component:
 Test Data 1
 Test Data 2

---

在控制台中安全地？

使用

@ContentChild（）

而不是

@ViewChildren（）

，下面的链接很好地解释了这两个装饰器之间的区别：

使用

@ContentChild（）

而不是

@ViewChildren（）

，这是一个链接，可以很好地解释这两个decorator之间的区别：

我很好奇：为什么不在服务中声明变量，然后在需要访问变量的地方导入该服务？服务对于共享变量非常有用，所以我想我可能还不了解您的场景。@Bytech我正在尝试创建一个可重用组件，该组件独立于使用它的应用程序。使用服务传输数据（在本例中）不会增加耦合吗？在Angular中，您可以保持服务松散耦合，而不是紧密耦合。在你的情况下，服务似乎是最好的选择。看看。。。这篇文章的第二部分专门论述了这个问题。如果这一切都能解决你的问题，让我知道，我会把它作为一个正式的答案。如果没有，请让我们了解使服务成为您案例糟糕解决方案的细微差别。@Bytech我已编辑了我的问题。neath app.component.html下的代码没有正确显示，因为堆栈溢出实际呈现了它。@Bytech我的问题是：是否可以从角度将子组件的选择器标记中包含的内容检索到子组件中的变量中。我很好奇：为什么不在服务中声明该变量，然后在需要访问变量的地方导入该服务？服务对于共享变量非常有用，所以我想我可能还不了解您的场景。@Bytech我正在尝试创建一个可重用组件，该组件独立于使用它的应用程序。使用服务传输数据（在本例中）不会增加耦合吗？在Angular中，您可以保持服务松散耦合，而不是紧密耦合。在你的情况下，服务似乎是最好的选择。看看。。。这篇文章的第二部分专门论述了这个问题。如果这一切都能解决你的问题，让我知道，我会把它作为一个正式的答案。如果没有，请让我们了解使服务成为您案例糟糕解决方案的细微差别。@Bytech我已编辑了我的问题。neath app.component.html下的代码未正确显示，因为堆栈溢出实际呈现了该代码。@Bytech我的问题是：是否可以从角度将子组件的选择器标记中包含的内容检索到子组件中的变量中。请更详细地解释为什么应该使用ContentChild而不是ViewChildren，因为它对搜索类似问题的其他人也可能有用。毫无疑问，这样做也将有助于提高您对社区的帮助声誉。@Ako Javakhishvili尝试使用@ContentChild（），但我收到了一个类似的错误。请更详细地解释为什么OP应该使用ContentChild而不是ViewChildren，因为它可能对其他搜索类似问题的人也有用。毫无疑问，这样做也将有助于提高你自己对社区有帮助的声誉。@Ako Javakhishvili尝试使用@ContentChild（），但我收到了类似的错误。

 <div #tt>The following data was passed to this component:</div>
    <ng-content select=".t1" #t1></ng-content>
    <ng-content select=".t2" #t1></ng-content>

import { Component, OnInit, ViewChildren, AfterContentInit, ElementRef } 
from '@angular/core';

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: [ './test.component.scss' ]
})
export class TestComponent implements AfterContentInit {

  @ViewChildren('t1') t1: ElementRef;
  @ViewChildren('t2') t2: ElementRef;
  @ViewChildren('tt') tt: ElementRef;
  constructor () { }

  ngAfterContentInit() {
      console.log(this.t1.nativeElement.innerHTML);
      console.log(this.t2.nativeElement.innerHTML);
      console.log(this.tt.nativeElement.innerHTML);
  }

}

The following data was passed to this component:
 Test Data 1
 Test Data 2