[]在angular 2选择器中是什么意思
我正在研究启动源代码,这里有一个选择器让我困惑。原代码如下:[]在angular 2选择器中是什么意思,angular,primeng,Angular,Primeng,我正在研究启动源代码,这里有一个选择器让我困惑。原代码如下: @Component({ selector: '[pTreeRow]', template: ` <div [class]="node.styleClass" [ngClass]="{'ui-treetable-row': true, 'ui-state-highlight':isSelected(),'ui-treetable-row-selectable':treeTable.selectio
@Component({
selector: '[pTreeRow]',
template: `
<div [class]="node.styleClass" [ngClass]="{'ui-treetable-row': true, 'ui-state-highlight':isSelected(),'ui-treetable-row-selectable':treeTable.selectionMode && node.selectable !== false}">
<td *ngFor="let col of treeTable.columns; let i=index" [ngStyle]="col.bodyStyle||col.style" [class]="col.bodyStyleClass||col.styleClass" (click)="onRowClick($event)" (dblclick)="rowDblClick($event)" (touchend)="onRowTouchEnd()" (contextmenu)="onRowRightClick($event)">
<a href="#" *ngIf="i == treeTable.toggleColumnIndex" class="ui-treetable-toggler fa fa-fw ui-clickable" [ngClass]="node.expanded ? treeTable.expandedIcon : treeTable.collapsedIcon"
[ngStyle]="{'margin-left':level*16 + 'px','visibility': isLeaf() ? 'hidden' : 'visible'}"
(click)="toggle($event)"
[title]="node.expanded ? labelCollapse : labelExpand">
</a>
<div class="ui-chkbox ui-treetable-checkbox" *ngIf="treeTable.selectionMode == 'checkbox' && i==0"><div class="ui-chkbox-box ui-widget ui-corner-all ui-state-default">
<span class="ui-chkbox-icon ui-clickable fa"
[ngClass]="{'fa-check':isSelected(),'fa-minus':node.partialSelected}"></span></div></div
><span *ngIf="!col.template">{{resolveFieldData(node.data,col.field)}}</span>
<ng-container *ngTemplateOutlet="col.template; context: {$implicit: col, rowData: node}"></ng-container>
</td>
</div>
<div *ngIf="node.children && node.expanded" class="ui-treetable-row" style="display:table-row">
<td [attr.colspan]="treeTable.columns.length" class="ui-treetable-child-table-container">
<table [class]="treeTable.tableStyleClass" [ngStyle]="treeTable.tableStyle">
<tbody pTreeRow *ngFor="let childNode of node.children" [node]="childNode" [level]="level+1" [labelExpand]="labelExpand" [labelCollapse]="labelCollapse" [parentNode]="node"></tbody>
</table>
</td>
</div>
`
})
Can't bind to 'node' since it isn't a known property of 'tbody'. (" <tbody pTreeRow *ngFor="let node of value" class="ui-treetable-data ui-widget-content" [ERROR ->][node]="node" [level]="0" [labelExpand]="labelExpand" [labelCollapse]="labelCollapse"></tbody>
"): ng:///TreeTableModule/TreeTable.html@28:107
Can't bind to 'level' since it isn't a known property of 'tbody'. ("tbody pTreeRow *ngFor="let node of value" class="ui-treetable-data ui-widget-content" [node]="node" [ERROR ->][level]="0" [labelExpand]="labelExpand" [labelCollapse]="labelCollapse"></tbody>
</ta"): ng:///TreeTableModule/TreeTable.html@28:121
Can't bind to 'labelExpand' since it isn't a known property of 'tbody'. ("ow *ngFor="let node of value" class="ui-treetable-data ui-widget-content" [node]="node" [level]="0" [ERROR ->][labelExpand]="labelExpand" [labelCollapse]="labelCollapse"></tbody>
</table>
"): ng:///TreeTableModule/TreeTable.html@28:133
Can't bind to 'labelCollapse' since it isn't a known property of 'tbody'. ("" class="ui-treetable-data ui-widget-content" [node]="node" [level]="0" [labelExpand]="labelExpand" [ERROR ->][labelCollapse]="labelCollapse"></tbody>
</table>
</div>
那么[]
的含义是什么
我试图删除[],只保留选择器:,,chrome控制台的错误如下所示:
@Component({
selector: '[pTreeRow]',
template: `
<div [class]="node.styleClass" [ngClass]="{'ui-treetable-row': true, 'ui-state-highlight':isSelected(),'ui-treetable-row-selectable':treeTable.selectionMode && node.selectable !== false}">
<td *ngFor="let col of treeTable.columns; let i=index" [ngStyle]="col.bodyStyle||col.style" [class]="col.bodyStyleClass||col.styleClass" (click)="onRowClick($event)" (dblclick)="rowDblClick($event)" (touchend)="onRowTouchEnd()" (contextmenu)="onRowRightClick($event)">
<a href="#" *ngIf="i == treeTable.toggleColumnIndex" class="ui-treetable-toggler fa fa-fw ui-clickable" [ngClass]="node.expanded ? treeTable.expandedIcon : treeTable.collapsedIcon"
[ngStyle]="{'margin-left':level*16 + 'px','visibility': isLeaf() ? 'hidden' : 'visible'}"
(click)="toggle($event)"
[title]="node.expanded ? labelCollapse : labelExpand">
</a>
<div class="ui-chkbox ui-treetable-checkbox" *ngIf="treeTable.selectionMode == 'checkbox' && i==0"><div class="ui-chkbox-box ui-widget ui-corner-all ui-state-default">
<span class="ui-chkbox-icon ui-clickable fa"
[ngClass]="{'fa-check':isSelected(),'fa-minus':node.partialSelected}"></span></div></div
><span *ngIf="!col.template">{{resolveFieldData(node.data,col.field)}}</span>
<ng-container *ngTemplateOutlet="col.template; context: {$implicit: col, rowData: node}"></ng-container>
</td>
</div>
<div *ngIf="node.children && node.expanded" class="ui-treetable-row" style="display:table-row">
<td [attr.colspan]="treeTable.columns.length" class="ui-treetable-child-table-container">
<table [class]="treeTable.tableStyleClass" [ngStyle]="treeTable.tableStyle">
<tbody pTreeRow *ngFor="let childNode of node.children" [node]="childNode" [level]="level+1" [labelExpand]="labelExpand" [labelCollapse]="labelCollapse" [parentNode]="node"></tbody>
</table>
</td>
</div>
`
})
Can't bind to 'node' since it isn't a known property of 'tbody'. (" <tbody pTreeRow *ngFor="let node of value" class="ui-treetable-data ui-widget-content" [ERROR ->][node]="node" [level]="0" [labelExpand]="labelExpand" [labelCollapse]="labelCollapse"></tbody>
"): ng:///TreeTableModule/TreeTable.html@28:107
Can't bind to 'level' since it isn't a known property of 'tbody'. ("tbody pTreeRow *ngFor="let node of value" class="ui-treetable-data ui-widget-content" [node]="node" [ERROR ->][level]="0" [labelExpand]="labelExpand" [labelCollapse]="labelCollapse"></tbody>
</ta"): ng:///TreeTableModule/TreeTable.html@28:121
Can't bind to 'labelExpand' since it isn't a known property of 'tbody'. ("ow *ngFor="let node of value" class="ui-treetable-data ui-widget-content" [node]="node" [level]="0" [ERROR ->][labelExpand]="labelExpand" [labelCollapse]="labelCollapse"></tbody>
</table>
"): ng:///TreeTableModule/TreeTable.html@28:133
Can't bind to 'labelCollapse' since it isn't a known property of 'tbody'. ("" class="ui-treetable-data ui-widget-content" [node]="node" [level]="0" [labelExpand]="labelExpand" [ERROR ->][labelCollapse]="labelCollapse"></tbody>
</table>
</div>
无法绑定到“node”,因为它不是“tbody”的已知属性。(“][node]=“node”[level]=“0”[labelExpand]=“labelExpand”[labelCollapse]=“labelCollapse”>
“”:ng:///TreeTableModule/TreeTable。html@28:107
无法绑定到“level”,因为它不是“tbody”的已知属性。(“tbody pTreeRow*ngFor=“let node of value”class=“ui树型数据ui小部件内容”[node]=“node”[ERROR->][level]=“0”[labelExpand]=“labelExpand”[labelCollapse]=“labelCollapse”>
][labelExpand]=“labelExpand”[labelCollapse]=“labelCollapse”>
“”:ng:///TreeTableModule/TreeTable。html@28:133
无法绑定到“labelCollapse”,因为它不是“tbody”的已知属性。(“”class=“ui树型数据ui小部件内容”[node]=“node”[level]=“0”[labelExpand]=“labelExpand”[ERROR->][labelCollapse]=“labelCollapse”>
有人能告诉我
[]
的含义吗?谢谢!该[]
表示它是在元素上选择的属性。因此,如果您有这样一个div:
<div someAttribute></div>
“我的svg文本组件”的组件代码
选择器:“pTreeRow”
表示选择具有名称的元素
选择器:'[pTreeRow]'
表示选择具有属性的元素
括号[selector name]
选择器是一个属性选择器。您使用它的方式如下:
<div someAttribute></div>
如果没有括号,则有元素选择器: