访问innerText内部组件

Question

我有一个非常简单的组件，看起来像这样，基本上可以完成工作。

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

@Component({
  selector: 'app-code',
  template: ' <pre><code [highlight]="code" [languages]="languages" [lineNumbers]="true"></code></pre> '
})
export class CodeComponent {

  readonly languages = ['java'];

  @Input()
  code = '';

  constructor() {
  }
}

但是，我想对它做一些小改动。

@Component({
  selector: 'app-code',
  template: '<pre><code [highlight]="code" [languages]="languages" [lineNumbers]="true"></code></pre>'
})
export class CodeComponent {

  readonly languages = ['java'];

  code = '';

  constructor(private elem: ElementRef) {
     this.code = elem.nativeElement.innerText;
  }
}

因此，与其写

<app-code [code]="'some code goes here'"></app-code>

我会写

<app-code>some code goes here</app-code>

不幸的是，它不工作，我的代码块仍然是空的

Answer 1

无法获取innerText，因为未绘制CodeComponent。

您需要使用ngAfterViewInit。

@Component({
  selector: 'app-code',
  template: '<pre><code [highlight]="code" [languages]="languages" [lineNumbers]="true"></code></pre>'
})
export class CodeComponent {

  readonly languages = ['java'];

  code = '';

  constructor(private elem: ElementRef) {
  }

  ngAfterViewInit() {
    this.code = elem.nativeElement.innerText;
  }
}