模板中的Angular2 ViewChild

Angular2 ViewChild in template

本文关键字：Angular2 ViewChild      更新时间：2023-09-26

我有以下视图(interests.component.html):

<Tree #tree [nodes]="nodes" [options]="treeOptions">
  <template #treeNodeTemplate let-node>
    <inline-editor #nodeEdit type="text" [(ngModel)]="node.data.name" (onEdit)="beginEditable($event)" (onSave)="saveEditable($event)" name="node{{node.data.id}}" size="8"></inline-editor>
      <a (click)="addNode(node)"><i class="pull-right btn btn-xs icon-plus"></i></a>
      <a (click)="editNode(node)"><i class="pull-right btn btn-xs icon-note"></i></a>
      <a (click)="deleteNode(node)"><i class="pull-right btn btn-xs icon-trash"></i></a>
  </template>
</Tree>

我的组件看起来像这样(interests.component.ts):

import { Component, ViewChild, ViewChildren, QueryList } from '@angular/core';
import * as _ from "lodash";
import * as $ from "jquery";
import { AppState } from '../app.service';
import {TreeModule, TreeNode, TREE_ACTIONS, KEYS, IActionMapping } from 'angular2-tree-component';
import {InlineEditorComponent} from 'ng2-inline-editor';
@Component({
  selector: 'interests',
  providers: [],
  styleUrls: ['./interests.component.scss'],
  templateUrl: './interests.component.html'
})
export class Interests {
  @ViewChild('tree') tree: any;
  @ViewChildren('nodeEdit') nodeEdits: any;
  /** Level multiplikator for tree id creation. */
  public static readonly LEVEL_MULTIPLIKATOR = 100000;
  /** Last inline text element which is/was in edit mode. */
  public lastSelectedEditElement: any;
  /** Id of last selected edit node. */
  public lastSelectedEditId: number;
  /** Options for the tree component. */
  treeOptions = {
    allowDrag: true
  };
  /** contains the tree nodes. */
  nodes: any;
  ngAfterViewInit() {
    console.log(this.nodeEdits);
  }
}

我想在编辑单击上获得inline-editor以调用编辑函数，但我无法获得此对象的引用。我尝试了以下viewChildren:

@ViewChildren('nodeEdit') nodeEdits: any;

但它总是未定义的。得到tree或treeNodeTemplate工作如预期。

希望有人能帮助我:)

我尝试在编辑按钮上单击this.nodeEdits，因此在此之前调用ngAfterViewInit()。

我尝试从我的兴趣控制器访问它它是视图的控制器

不能在ngOnInit()或构造函数中访问nodeEdits。

仅当ngAfterViewInit()被称为this.nodeEdits时设置。
相关文章：