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

Question

I was looking into some code I had already written and got working, and I noticed this:

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

the component was invoked like this:

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

Why does the id input to the component not cause problems? My understanding is that user defined Angular 2 directives occupied the same name space as the standard HTML definitions but this action worked fine.

Of course I am going to fix this (WebStorm refactor/rename to the rescue) but now I think my understanding of Angular 2 works is faulty. Can anyone explain?

Answer 1

Angular looks first to see if the name is a property of a known directive. Technically, angular is matching the name to a directive input, one of the property names listed in the directive's inputs array or a property decorated with @Input() .

Only then if such property was not found in boundDirectivePropNames it compares property with 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

See also

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