AngularJS 2 中使用的括号和特殊字符与 TypeScript

Question

我现在在 angularjs1 之后学习 angularjs2。我正在使用 TypeScript 变体。我发现 angular 属性使用了一些方括号和特殊字符。任何人都可以通过适当的例子帮助我深入了解使用哪个的原因。另外请添加与此问题相关的任何更多特殊字符（如果我遗漏了任何字符。）

[(ngModel)]

(click)

*ngIf

ngRepeat="#hero in heros"

等等

Answer 1

[(ngModel)] :

通常我们在 Angular2 中将此语法用于 TWO WAY BINDING。即我们从模板或控制器进行更改它 angular 反映了变化。通常我们使用这种语法，如果我们必须在模板和控制器的同一侧进行更改。

（点击）：

这是 Angular2 中的事件绑定。 Angular2 中有很多事件绑定。

*ngIf :

此语法类似于 css 中的 display: none/block。但它与 css 的选择器 display 不同，因为根据 Angular2 的 *ngIf 不允许渲染错误的代码部分，即如果 *ngIf='false' 在任何 div 或任何 html 部分。 angular 不允许渲染该部分。而在 CSS 中，该部分占据 space.

ngRepeat="#英雄中的英雄"

这是 angular 1.x 的语法，但在 angular2 中 ngRepeat 被替换为 *ngFor。通常我们使用 *ngFor 遍历数组以从列表数组中获取所有项目以避免额外的代码。 angular2 中的 *ngFor 与此处的两个变量相结合...

*ngFor= '#hero of Heros'

这里#hero是局部变量，Heros是我们迭代循环的数组名。

Answer 2

除了@PardeepJain 的回答。

<my-comp [(someName)]="someExpression">

是

的缩写形式

<my-comp [someName]="someExpression" (someNameChange)="someExpression=$event">

在 MyComp 中必须有一个 input 和一个 output，例如

@Component({
  selector: 'my-comp',
  inputs: ['someName'],
  outputs: ['someNameChange']})
class MyComp {
  someName:SomeType;
  someNameChange:EventEmitter = new EventEmitter();
}

或者喜欢

@Component({
  selector: 'my-comp'
})
class MyComp {
  @Input() someName:SomeType;
  @Output() someNameChange:EventEmitter = new EventEmitter();
}

输入：见https://angular.io/docs/ts/latest/api/core/Input-var.html
输出：见https://angular.io/docs/ts/latest/api/core/Output-var.html

这对指令同样适用。

AngularJS 2 中使用的括号和特殊字符与 TypeScript

Brackets and Special char used in AngularJS 2 with TypeScript

special-characters

typescript

angular

[(ngModel)] :

（点击）：

*ngIf :

ngRepeat="#英雄中的英雄"