角度2选择器中的[]意味着什么

时间:2018-02-12 16:45:36

标签: angular primeng

我正在研究primeNG源代码,这里有一个选择器让我困惑。原始代码如下:

@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>
    `
})

我的问题是选择器中[]的含义,因为在以下代码中它是pTreeRow而不是[pTreeRow]

<tbody pTreeRow *ngFor="let childNode of node.children" [node]="childNode" [level]="level+1" [labelExpand]="labelExpand" [labelCollapse]="labelCollapse" [parentNode]="node"></tbody>

那么[]是什么意思?

我尝试删除[]并仅保留selector: 'pTreeRow',,Chrome控制台的错误显示如下:

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>

有人可以告诉我[]的含义吗?谢谢!

3 个答案:

答案 0 :(得分:3)

selector: 'pTreeRow'表示选择名称为<pTreeRow></pTreeRow>

的元素

selector: '[pTreeRow]'表示选择具有属性<whatever pTreeRow></whatever>

的元素

答案 1 :(得分:1)

[]表示在元素上选择了attribute。所以如果你有这样的div:

<div someAttribute></div>

你有[someAttribute]的选择器会选择此div并将其用于组件。在使用自定义SVG组件时,这种情况尤为常见。

示例:

某些html文件中的

...

<svg:text my-svg-text></svg:text>

您的组件代码&#39; my-svg-text-component&#39;

@Component({
  selector: `[my-svg-text]`,
  template: `...`
})
export class MySvgTextComponent { }

答案 2 :(得分:0)

括号[selector-name]选择器是一个属性选择器。你正在使用它:

<div [selector-name]></div>

没有括号,你有元素选择器:

<selector-name></selector-name>