时间戳

首页 > 解决方案 > 父组件的变量不能在子组件中访问

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

问题描述

我需要在我的 RolesComponent 中检查这个加载的变量是真还是假。

但我收到此错误：

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;
  }

}

角色.component.html

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

标签： angular6

解决方案

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

@ViewChild 将在父组件中查找子组件的引用。

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

因此，只需确保您在父 HTML 中添加了子选择器。

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

推荐阅读