2017-05-24 81 views
1

我一直在尋找到一些代碼,我已經寫了,並得到了工作,我注意到了這一點:Angular 2指令名稱衝突 - 爲什麼這不會中斷?

@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的理解是錯誤的。誰能解釋一下?

+0

用戶定義Angular 2指令佔用與標準HTML定義相同的名稱空間嗎? –

+0

這是什麼問題?它對我的預期效果 – yurzui

+2

你爲什麼認爲它不應該工作?你有沒有在某處讀過一些輸入名稱被禁止的地方?如果不是,爲什麼要做這個假設? –

回答

3

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

參見