Angular:如何在访问其 nativeElements 之前等待元素准备就绪？

Question

我正在尝试绘制由一条线连接的两个 div(每个包含组件)。线的长度取决于我使用 nativeElement 属性访问的 div 的宽度。

当我在模板中使用 [style.width] 属性，并调用函数来使用 nativeElements 计算宽度时，我收到此错误:

ERROR TypeError: Cannot read property 'nativeElement' of undefined
    at BeanViewComponent.webpackJsonp.../../../../../src/app/pages/shared/stringbean/beans/beanView.component.ts.BeanViewComponent.getWidth (beanView.component.ts:81)
    at Object.eval [as updateRenderer] (BeanViewComponent.html:14)
    at Object.debugUpdateRenderer [as updateRenderer] (core.es5.js:13094)
    at checkAndUpdateView (core.es5.js:12241)
    at callViewAction (core.es5.js:12601)
    at execEmbeddedViewsAction (core.es5.js:12559)
    at checkAndUpdateView (core.es5.js:12237)
    at callViewAction (core.es5.js:12601)
    at execComponentViewsAction (core.es5.js:12533)
    at checkAndUpdateView (core.es5.js:12242)
    at callViewAction (core.es5.js:12601)
    at execEmbeddedViewsAction (core.es5.js:12559)
    at checkAndUpdateView (core.es5.js:12237)
    at callViewAction (core.es5.js:12601)
    at execEmbeddedViewsAction (core.es5.js:12559)

这是模板:

<div class="bean-view" (click)="backgroundClick.emit()"> 
  <div class="bean-label-container" *ngIf="showLabels">
    <div class="bean-label" *ngFor="let label of bean.labels">{{label}}</div>
  </div>
  <div class="bean-icon-container" #beanIconContainerElement>
    <sb-bean-icon [type]="bean.type"></sb-bean-icon>
  </div>
  <div *ngIf="bean" class="bean" (click)="contentClick.emit()" #beanElement>
    <sb-bean-content [class.disable-click]="disableContentClick" [bean]="bean"></sb-bean-content>
  </div>
  <div class="bean-complete-marker completion-line" [style.width]="getWidth()"></div>
  <div class="bean-response-wrapper">
    <div class="bean-response" *ngFor="let response of bean.response" (click)="responseClick.emit()" #beanResponseElement>
      <sb-bean-content [bean]="response" [isResponse]="true"></sb-bean-content>
    </div>
  </div>
</div>

这是组件代码:

import {
  Component,
  OnInit,
  ChangeDetectionStrategy,
  Input,
  Output,
  EventEmitter,
  ViewChild,
  ElementRef
} from '@angular/core';
import { Bean } from '../../../../shared/model';

@Component({
  selector: 'bean-view',
  templateUrl: './beanView.html',
  styleUrls: ['./beanView.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class BeanViewComponent implements OnInit {
  @Input() bean: Bean;
  @Input() disableContentClick: Bean;
  @Input() showLabels: boolean;

  @Output() contentClick = new EventEmitter();
  @Output() responseClick = new EventEmitter();
  @Output() backgroundClick = new EventEmitter();

  @ViewChild('beanIconContainerElement') beanIconContainerElement;
  @ViewChild('beanElement') beanElement;
  @ViewChild('beanResponseElement') beanResponseElement;

  constructor() {
  }
  ngOnInit() {
  }

  getWidth(): string {
    const bound: number = 200;
    const iconWidth: number = this.beanIconContainerElement.nativeElement.offsetWidth;
    const beanWidth: number = this.beanElement.nativeElement.offsetWidth;
    const width: number = bound - (iconWidth + beanWidth);
    return String(width) + 'px';
  }
}

Answer 1

尝试将代码放在里面

ngAfterViewInit() { }

此时应该完全呈现 html。