Кронштейны и специальный символ, используемый в AngularJS 2 с TypeScript

Question

Теперь я изучаю angularjs2 после angularjs1. Я использую вариацию TypeScript. Я обнаружил, что некоторые скобки и специальные символы используются для угловых атрибутов. Может кто-нибудь, пожалуйста, помогите мне разобраться в том, какой из них используется по какой причине с надлежащим примером. Также, пожалуйста, добавляйте более специальный символ, связанный с этим вопросом (если я пропустил какой-либо.)

[(ngModel)] 

(click) 

*ngIf 

ngRepeat="#hero in heros" 

Etc

Answer 1

[(ngModel)]:

Обычно мы использовали этот синтаксис для TWO WAY BINDING в Angular2 , либо мы внесли изменения из шаблона, либо из контроллера он отражает углы отражения изменений. Обычно мы использовали этот синтаксис, если нам нужно внести изменения в обе стороны в одной и той же стороне в шаблоне, а также в контроллере.

(клик):

это является событие связывания в Angular2. в Angular2 есть много привязок событий.

* ngIf:

этот синтаксис как display: none/block выступы в CSS. но он отличается от селектора css display, так как согласно Angular2's * ngIf не позволяет отображать часть кода, которая является ложью i.e, если *ngIf='false' на любой div или любой части html. угловой не позволяет отображать эту часть. тогда как в CSS эта часть занимает пространство.

ngRepeat = "# герой в" героях

это синтаксис угловых 1.x, но в angular2 ngRepeat заменяется *ngFor. normaly мы использовали *ngFor для перебора массива, чтобы получить все элементы из массива списка, чтобы избежать дополнительный код. здесь * ngFor в angular2 comnined с двумя переменными, как здесь ...

*ngFor= '#hero of Heros' 

здесь #hero является локальной переменной и Heros является именем массива над whihc мы итерацию цикла.

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

Это работает так же директив.