Angular ViewChild有什么问题吗？

Question

null

@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>

null

我也有一个.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}）truncator：elementRef；我试了好几种方法，比如截尾器和体文本，但什么都没有...太烦人了..

为什么截断器和另一个不能工作......

Answer 1

typescript错误是因为它所说的“not deterial assigned in The constructor”，这在@viewchild的Angular中是正常的。

您可以添加！-非Null断言来通知typescript它将不为Null：

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