Question

试图了解Angular2但不知何故@ContentChild无效。我的结局肯定会有一个非常基本的错误，但我无法弄清楚，在哪里。任何帮助将非常感激。

app.components.ts

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

@Component({
  selector: 'app-root',
  template: `
    <p #boundContent>{{localCounter}}</p>
    Verify me: <p>{{boundContent.textContent}}</p>
      <hr>
      <fa-contentchild></fa-contentchild>
            `,
  styles: [`
      h1{color:red;}
  `]
})
export class AppComponent {
  localCounter:number =700;
  doShow:boolean=false;
  title = 'angular sucks!';
}

contentchild.component.ts

import { AfterContentInit, Component, ContentChild } from '@angular/core';

@Component({
  selector: 'fa-contentchild',
  template: `
    <p>I am from content Child: {{boundContent}}</p>
  `,
  styles: []
})
export class ContentchildComponent implements AfterContentInit {

  @ContentChild('boundContent')
  boundContent:HTMLElement;

  constructor() { }

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

}

Answer 1

使用@ContentChild()，您只能查询不是兄弟姐妹的内容

这样就可以了

  template: `

    Verify me: <p>{{boundContent.textContent}}</p>
      <hr>
      <fa-contentchild>
        <p #boundContent>{{localCounter}}</p>
      </fa-contentchild>
            `,

另一种方式是

  template: `
    <p #boundContent>{{localCounter}}</p>
    Verify me: <p>{{boundContent.textContent}}</p>
      <hr>
      <fa-contentchild [content]="boundContent"></fa-contentchild>
            `,

export class ContentchildComponent implements AfterContentInit {

  @Input()
  boundContent:HTMLElement;

  constructor() { }

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

}

Angular的@ContentChild不适合我

1 个答案: