Question

在使用<ng-content>时查找访问组件值的方法：

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

@Component({
  selector: 'home-page',
  template: `<person-box>{{name}}</person-box> <!-- something like this -->`
})
export class HomePageComponent {
  // missing code?
}

组件代码：

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

@Component({
  selector: 'person-box',
  template: `<div style="background-color: blue;"><ng-content></ng-content></div>`
})
export class PersonBoxComponent {
  name = 'Katharina Muster';
}

（以上示例当然非常简化。）

使用@ViewChild时有效：

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

@Component({
  selector: 'home-page',
  template: `<person-box>{{box.name}}</person-box>`
})
export class HomePageComponent {
  @ViewChild(PersonBoxComponent) box: PersonBoxComponent;
}

Answer 1

@ContentChild(PersonBoxComponent) box:PersonBoxComponent;

ngAfterContentInit() {
  console.log(this.box);
}

使用“<ng-content>”时访问组件的值

1 个答案: