Angular 2指令名称冲突 - 为什么这不会中断？

Question

我一直在寻找到一些代码，我已经写了，并得到了工作，我注意到了这一点：

@Component({ 
    selector: 'app-doc-edit', 
    templateUrl: './doc-edit.component.html', 
    styleUrls: ['./doc-edit.component.css'] 
}) 
export class DocEditComponent implements OnInit { 
    ... 
    @Input() id: number; 

组件被调用是这样的：

<app-doc-edit [id]="path.path.id"> 
    </app-doc-edit> 

的ID输入为什么要该组件不会导致问题？我的理解是，用户定义的Angular 2指令占用与标准HTML定义相同的名称空间，但此操作正常工作。

当然，我要解决这个问题（WebStorm重构/重命名为救援），但现在我认为我对Angular 2的理解是错误的。谁能解释一下？

Answer 1

Angular首先查看名称是否是已知指令的属性。从技术上讲，angular会将名称与指令输入相匹配，指令的inputs阵列中列出的属性名称之一或用@Input()装饰的属性。

只有这样，如果这些财产是不是在boundDirectivePropNames发现它与the standart HTML definitions

比较财产

private _createElementPropertyAsts(
    elementName: string, props: BoundProperty[], 
    boundDirectivePropNames: Set <string>): BoundElementPropertyAst[] { 
    const boundElementProps: BoundElementPropertyAst[] = []; 

    props.forEach((prop: BoundProperty) => { 
     if (!prop.isLiteral && !boundDirectivePropNames.has(prop.name)) { // don't add if exists in directive 
      boundElementProps.push(this._bindingParser.createElementPropertyAst(elementName, prop)); 
     } 
    }); 
    return this._checkPropertiesInSchema(elementName, boundElementProps); // check in standart HTML definitions 
} 

https://github.com/angular/angular/blob/4.1.3/packages/compiler/src/template_parser/template_parser.ts#L641-L646

参见

• https://angular.io/docs/ts/latest/guide/template-syntax.html#!#binding-target