等效于限制：Angular2 中的 AE答案

【问题标题】：Equivalent of restrict: AE in Angular2等效于限制：Angular2 中的 AE
【发布时间】：2016-04-28 04:24:36
【问题描述】：

在 Angular 1 中，您可以使用 restrict 来确定如何使用您的指令。例如：

angular.module('foo').directive('fooDirective', [function () {
  return {
    restrict: 'AE',
    /* ... */
  }
}]);

然后您就可以在模板中将其用作属性或元素：

<foo />

或

<div foo />

我一直在诸如 this one 之类的网站上阅读到，在 Angular2 中，select 正确的方式来定义现在如何使用您的组件：

@Component({
  selector: 'Sample'
});

然后在你的模板中：

<Sample />

同样，添加括号可以将其用作属性：

@Component({
  selector: '[Sample]'
});

模板：

<div Sample />

但是，如果我想让它同时用作属性和元素，相当于 Angular 1 中的 restrict: 'AE'，该怎么办？

【问题讨论】：

标签： javascript angularjs angularjs-directive angular

【解决方案1】：

你可以使用

@Component({
  selector: 'sample,[Sample]'
});

参见https://github.com/angular/angular/blob/60727c4d2ba1e4b0b9455c767d0ef152bcedc7c2/modules/angular2/src/common/forms/directives/ng_form.ts#L81 的示例

@Directive({ selector: 'form:not([ngNoForm]):not([ngFormModel]),ngForm,[ngForm]',

【讨论】：

【解决方案2】：

restrict: 'AE' 在AngularJS 2 中仍然有效。你指的是Angular 2 for TypeScript。我在您的问题中没有看到 TypeScript 标签。 Go to the link you have provided 并注意 Angular 2 for TypeScript 在下拉列表中被选中。

【讨论】：

抱歉，是的，我使用的是 Typescript。