AngularJS 1.6+TypeScript组件标签属性声明与控制器取值咨询

当然可行！结合AngularJS 1.6的组件系统和TypeScript的类语法，完全可以轻松实现这个需求，下面是具体步骤和示例代码：

1. 定义组件并配置属性绑定 #

首先，你需要在注册组件时，通过bindings配置项声明要接收的外部属性。注意HTML里的短横线命名（my-attr）要对应TypeScript里的驼峰命名（myAttr），这是AngularJS的自动转换规则。

对于字符串类型的静态值，我们用@符号做单向绑定（如果需要双向绑定可以用=，但这里静态字符串用@更合适）。

示例组件注册代码：

angular.module('yourAppModule')
  .component('myComponent', {
    templateUrl: 'path/to/your/component-template.html', // 也可使用template写内联模板
    bindings: {
      myAttr: '@' // 这里的myAttr对应HTML里的my-attr
    },
    controller: MyComponentController
  });

2. 用TypeScript类编写控制器 #

接下来，我们用TypeScript类来实现组件的控制器，直接在类中声明对应绑定的属性即可，TypeScript会帮我们做类型检查：

class MyComponentController {
  // 声明属性并指定类型（这里为字符串类型）
  myAttr: string;

  constructor() {
    // 注意：构造函数执行时属性还未被赋值，建议在$onInit钩子中访问
  }

  $onInit() {
    // 组件初始化完成后，这里可以拿到myAttr的最终值
    console.log('my-attr的值是:', this.myAttr); // 会输出"foo"
    // 你可以在这里编写任何需要使用该属性的业务逻辑
  }
}

// 将控制器注册到模块，或者直接在组件配置中引用（如第一步所示）
angular.module('yourAppModule').controller('MyComponentController', MyComponentController);

3. 在HTML中使用组件并传递属性值 #

就像你给出的示例那样，直接在组件标签中声明my-attr属性并赋值：

<my-component my-attr="foo"></my-component>

如果需要传递动态值（比如作用域里的变量），可以用表达式语法：

<my-component my-attr="{{$scope.someVariable}}"></my-component>

关键注意点 #

• 绑定命名规则：HTML中的kebab-case（短横线分隔）必须对应TypeScript控制器中的camelCase（驼峰命名），AngularJS会自动处理这个转换。
• 生命周期钩子：尽量在$onInit中访问绑定的属性，因为构造函数执行时，AngularJS还未完成属性的赋值，此时this.myAttr会是undefined。
• 绑定类型：如果是传递对象或需要双向绑定，把bindings里的@换成=即可，但静态字符串场景下@是最佳选择。

内容的提问来源于stack exchange，提问作者luthien