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