我有以下幾點看法(interests.component.html):Angular2 ViewChild模板
<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
按預期工作。
希望有人能夠幫助我:)
更新
我嘗試在一個編輯按鈕,點擊所以ngAfterViewInit()
之前調用訪問this.nodeEdits
。
我嘗試從我的興趣控制器訪問它,該控制器是視圖的控制器。
你在哪裏訪問它? – micronyks
添加「未定義」是什麼? 'NgOnInit'? 'NgAfterViewInit'?需要更多的細節。 –