父组件的变量不能在子组件中访问

Question

我需要在我的RolesComponent中检查此加载的变量是true还是false。

但是我收到此错误：

ERROR TypeError: Cannot read property 'loaded' of undefined

这些是我尝试过的代码

用户

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

    events = [];
    loaded:boolean = false;

    constructor(private _eventService: UserService) { }

    ngOnInit() {
        this._eventService.getEvents()
            .subscribe(
                res => {
                    this.events = res;
                    this.loaded = true;
                    console.log(this.loaded);
                },
                err => console.log(err)
            );
    }
}

users.component.html

<div class="card-body">
              <h5 class="card-title">{{ event.name }}</h5>
              <p class="card-text">{{ event.description }}</p>

角色

import { Component, AfterViewInit, ViewChild } from '@angular/core';
import { UsersComponent } from '../events/users.component';

export class RolesComponent implements AfterViewInit {

  @ViewChild(UsersComponent) event;

  constructor() { }
  loaded: boolean;
  ngAfterViewInit() {
    console.log(this.event.loaded);
    this.loaded = this.event.loaded;
  }

}

roles.component.html

<div class="wrapper" *ngIf="loaded">

Answer 1

@ViewChild用于引用父组件中的子组件。

@ViewChild将在“父组件”中寻找子组件的引用。

您必须确保在父HTML中使用了为子组件定义的子选择器。您必须编写此代码，以便if可以将您的@ViewChild对象与此组件进行映射。

因此，请确保已在父HTML中添加了子选择器。

如果您使用HTML编写相同的内容，则可能存在加载顺序问题。