angular - 从另一个组件访问一个组件的属性会导致角度未定义的错误

问题描述

我正在尝试从一个组件访问另一个组件的属性。一个组件包含模态另一个是普通视图页面。当我想调用一个从视图页面打开模式的函数时，它会返回一个错误，指出调用的方法未定义。这实际上正在发生，因为模态组件无法创建模态对象并返回未定义。我认为从下面给出的代码中可以更清楚地看到这个场景。

模态 HTML

<div *ngIf="isActive" bsModal #createOrEditAuthorModal="bs-modal" 
class="modal fade" tabindex="-1" role="dialog"
  aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
    <!--Modal Body-->
    </div>
  </div>
</div>

模态 Ts 文件

import { Component, Injector, ViewChild } from '@angular/core';
import { AppComponentBase } from '@shared/app-component-base';
import { ModalDirective } from 'ngx-bootstrap/modal';

@Component({
  selector: 'app-create-or-edit-author-modal',
  templateUrl: './create-or-edit-author-modal.component.html',
  styleUrls: ['./create-or-edit-author-modal.component.less']
})
export class CreateOrEditAuthorModalComponent extends 
AppComponentBase {
  @ViewChild('createOrEditAuthorModal') public modal: 
  ModalDirective

  constructor(
    injector: Injector
  ) {
    super(injector);
  }

  show(): void {=
    this.modal.show();
    this.isActive = true;
  }

}

引用页面 HTML

<div [@routerTransition]>
  <div>
    <section class="content-header">
      <div class="container-fluid">
        <div class="row">
          <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 col-xl- 
          6">
            <h1>{{ l('Authors') }}</h1>
          </div>

          <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 col-xl-6 
          pull-right">
            <button type="button" class="btn btn-sm btn-primary" 
            (click)="createNewAuthor()">
              <i class="fa fa-plus" aria-hidden="true"> 
                  {{l('CreateAuthor')}}</i>
            </button>
          </div>
        </div>
      </div>
    </section>

    <!-- Create or Edit New Book -->
    <app-create-or-edit-author-modal #createOrEditAuthor></app- 
    create-or-edit-author-modal>
  </div>
</div>

参考页面 TS

import { Component, Injector, ViewChild } from '@angular/core';
import { appModuleAnimation } from 
'@shared/animations/routerTransition';
import { AppComponentBase } from '@shared/app-component-base';

@Component({
  selector: 'app-authors',
  templateUrl: './authors.component.html',
  styleUrls: ['./authors.component.less'],
  animations: [appModuleAnimation()]
})
export class AuthorsComponent extends AppComponentBase implements{
  @ViewChild('createOrEditAuthor', { static: true }) 
  createOrEditAuthor: CreateOrEditAuthorModalComponent

  constructor(
    injector: Injector
  ) {
    super(injector);
  }

  createNewAuthor(): void {
    this.createOrEditAuthor.show();
  }

}

在模态 Ts文件中，如果我modal在中打印对象ngAfterViewInit()，则打印未定义。

我认为引用页面在其视图初始化之前初始化了模态页面的对象。

标签： angulartypescript

angular - 从另一个组件访问一个组件的属性会导致角度未定义的错误

问题描述

解决方案

推荐阅读