Angular ViewChild 有问题吗？

Question

@import '../../main-styles.scss';
.note-card-container {
  position: relative;
  background: white;
  border-radius: 5px;
  box-shadow: 0px 2px 15px 2px rgba(black, 0.068);
  transition: box-shadow 0.2s ease-out;
  margin-top: 35px;
  &:hover {
    cursor: pointer;
    box-shadow: 0px 0px 0px 4px rgba(black, 0.068);
    .x-button {
      opacity: 1;
      transform: scale(1);
      transition-delay: 0.35s;
    }
  }
  .note-card-content {
    padding: 25px;
    .note-card-title {
      font-size: 22px;
      font-weight: bold;
      color: $purple;
    }
    .note-card-body {
      position: relative;
      color: #555;
      max-height: 80px;
      overflow: hidden;
      .fade-out-truncation {
        position: absolute;
        pointer-events: none;
        bottom: 0;
        height: 50%;
        width: 100%;
        background: linear-gradient(to bottom, rgba(white, 0) 0%, rgba(white, 0.8) 50%, white 100%);
      }
    }
  }
}

.x-button {
  position: absolute;
  top: 12px;
  right: 12px;
  height: 34px;
  width: 34px;
  background-color: $light-red;
  background-image: url('../../assets/delete_icon.svg');
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 4px;
  transition: opacity 0.2s ease-out, transform 0.2s ease-out;
  opacity: 0;
  transform: scale(0.35);
  &:hover {
    background-color: darken($light-red, 3%);
  }
  &:active {
    background-color: darken($light-red, 5%);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div #container class="note-card-container">

  <div class="note-card-content">
    <h1 class="note-card-title">Title</h1>

    <div #bodyText class="note-card-body">
      <p> This is a test </p>
      <div #truncator class="fade-out-truncation"></div>
    </div>
  </div>
  <div class="x-button"></div>
</div>

我也有一个 .ts:

import { Component, ElementRef, OnInit, Renderer2, ViewChild, ViewChildren, } from '@angular/core';

@Component({
  selector: 'app-note-card',
  templateUrl: './note-card.component.html',
  styleUrls: ['./note-card.component.scss']
})
export class NoteCardComponent implements OnInit {
  name = "Angular";

  @ViewChild('truncator', {static: true}) truncator: ElementRef<HTMLElement>;
  @ViewChild('bodyText') bodyText: ElementRef<HTMLElement>;

  constructor(private renderer: Renderer2) { }

  ngOnInit() {
    let style = window.getComputedStyle(this.bodyText.nativeElement, null);
    let viewableHeight = parseInt(style.getPropertyValue("height"),10);

    if (this.bodyText.nativeElement.scrollHeight > viewableHeight) {
        this.renderer.setStyle(this.truncator.nativeElement, 'display', 'block');

    }else{
      this.renderer.setStyle(this.truncator.nativeElement,'display', 'none');
    }
  }

}

错误：错误 TS2564：属性 'truncator' 没有初始化器，在构造函数中未明确赋值。

我真的不知道为什么...这是我以前见过的最简单的东西，但它不起作用.. 在 component.html 需要用 # 标记 html 元素，而不是在 component.ts 使用这个： @ViewChild('truncator', {static: true}) 截断器：ElementRef；我尝试了多种方式，比如 truncator 和 bodyText，但是什么都没有......太烦人了..

为什么 truncator 和另一个不起作用......

Answer 1

打字稿错误正是因为它所说的：“未在构造函数中明确分配”，在Angular中对于@ViewChild是正常的.

你可以添加! - Definite Assignment Assertion来通知打字稿它不会为空：

  @ViewChild('truncator', {static: true}) truncator!: ElementRef<HTMLElement>;
  @ViewChild('bodyText') bodyText!: ElementRef<HTMLElement>;

Angular ViewChild 有问题吗？

Is something wrong with Angular ViewChild?

html

typescript

viewchild

angular