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

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

1 个答案: