@ViewChild 無法訪問 Angular 中子組件的屬性

Question

我有一個孩子和一個父組件。 在孩子中，我定義了一個我不想通過@ViewChild 指令和console.log 訪問的屬性，它的值。 但我總是得到類型未定義錯誤。 我錯過了什么？ 我還在 afterViewInit() 中使用了 console.log 來確保孩子被渲染。

這是家長：

import { Component, AfterViewInit, ViewChild, } from '@angular/core';
import { HoseComponent } from '../hose/hose.component';

@Component({
  selector: 'app-knop',
  templateUrl: './knop.component.html',
  styleUrls: ['./knop.component.css']
})
export class KnopComponent implements AfterViewInit {

  @ViewChild(HoseComponent) hose!: HoseComponent;

  ngAfterViewInit(): void {
    console.log(this.hose.spliff)
  }
} 

這是孩子：

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

@Component({
  selector: 'app-hose',
  templateUrl: './hose.component.html',
  styleUrls: ['./hose.component.css']
})
export class HoseComponent {
spliff = 89
}

Answer 1

你添加了#hose！ 到你的父標記？ 喜歡：

<h1>Parent scope</h1>
<app-hose #hose!></app-hose>