Question

我有一个角度组件app-b，它在app-component中使用的组件app-a中使用。 app-component在app-a中有一些内容，app-a将ng-content转换为app-b，app-b用另一个ng-content显示它 - 但是我如何在组件中访问这些内容（而不是它的模板）？

我认为ContentChild是正确的方法，但似乎是错误的。

示例：

https://stackblitz.com/edit/angular-ddldwi

编辑：更新了示例

Answer 1

您无法使用@ContentChild装饰器按标签名称进行查询。您可以通过模板变量，组件或指令选择器进行查询。

应用-a.component.html

<app-b> <ng-content></ng-content> <p #myContent>This is a content child for app-b.</p> </app-b>

应用-b.component.ts

import { Component, AfterContentInit, ContentChild } from '@angular/core'; @Component({ selector: 'app-b', templateUrl: './b.component.html', styleUrls: ['./b.component.css'] }) export class BComponent implements AfterContentInit { @ContentChild('myContent') contentchild; ngAfterContentInit() { console.log(this.contentchild); } }

Live demo

Answer 2

我建议在组件之间共享数据。例如，将您的数据（E.G. dummyName）移动到服务中。然后将服务添加到每个组件（您需要共享数据的位置）。

服务：

import { Injectable } from '@angular/core';

@Injectable()
export class DataShareService {
   public dummyName: String = 'one';
   constructor() { }
}

将新服务添加到app.module.ts：

providers: [DataShareService],

子组件：

import { DataShareService } from './data-share.service';
import { Component } from '@angular/core';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html'
})
export class ChildComponent  {
  constructor(public ds: DataShareService) { }

  toggle() {
    this.ds.dummyName = this.ds.dummyName === 'one' ? 'two' : 'one';
  }
}

子组件模板（html）：

<p> {{ds.dummyName}}</p>
<button (click)="toggle()">Click Me to Toggle Value</button>

父组件：

import { Component, OnInit } from '@angular/core';
import { DataShareService } from './data-share.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent  {
  constructor(public ds: DataShareService) {}

  displayNumber() {
   return this.ds.dummyName === 'one' ? 1 : 2;
  }
}

父组件模板（html）：

<p> this is the parent component:</p>
<div> value as string:   {{ ds.dummyName }} </div>
<div> value as number: <span [textContent]="displayNumber()"></span></div>
<hr>
<p> this is the child component:</p>
<app-child></app-child>

请注意！子组件toggle（）函数演示了如何更改数据。父组件displayNumber（）函数演示了如何使用数据，而不依赖于它的显示（I.E.只是纯数据）。

Answer 3

由于Angular中的错误，这似乎是不可能的： https://github.com/angular/angular/issues/20810

进一步参考： https://www.reddit.com/r/Angular2/comments/8fb3ku/need_help_how_can_i_access_an_already_transcluded/

如何访问已经被翻译的ContentChild？

3 个答案: