admin管理员组

文章数量:1180433

While reading about @Input() and @Output() I have found that we can use an alias instead of using the property name for the decorators.

Example

  class ProductImage {
    //Aliased
    @Input('myProduct') product: string;

    //Un-aliased
    @Input() product: string;//not aliased
  }

HTML

//Aliased attribute
<SomeComponent [myProduct] = "Product Name"></SomeComponent>

//Un-aliased attribute
<SomeComponent [product] = "Product Name"></SomeComponent>

The official Angular documentation says:

Sometimes we want the public name of an input/output property to be different from the internal name. This is frequently the case with attribute directives. Directive consumers expect to bind to the name of the directive. For example, when we apply a directive with a myClick selector to a tag, we expect to bind to an event property that is also called myClick.

And This tutorial briefly explains it:

an alias let's me override the property name to be the alias instead of the original property name

Other than that I have not been able to find anything else on aliasing @Input() and @Output() on SO or through Google.

Things I would like to know are:

• What does 'aliasing' attempt to achieve?
• Is 'aliasing' something that we should be using regularly?

While reading about @Input() and @Output() I have found that we can use an alias instead of using the property name for the decorators.

Example

  class ProductImage {
    //Aliased
    @Input('myProduct') product: string;

    //Un-aliased
    @Input() product: string;//not aliased
  }

HTML

//Aliased attribute
<SomeComponent [myProduct] = "Product Name"></SomeComponent>

//Un-aliased attribute
<SomeComponent [product] = "Product Name"></SomeComponent>

The official Angular documentation says:

Sometimes we want the public name of an input/output property to be different from the internal name. This is frequently the case with attribute directives. Directive consumers expect to bind to the name of the directive. For example, when we apply a directive with a myClick selector to a tag, we expect to bind to an event property that is also called myClick.

And This tutorial briefly explains it:

an alias let's me override the property name to be the alias instead of the original property name

Other than that I have not been able to find anything else on aliasing @Input() and @Output() on SO or through Google.

Things I would like to know are:

• What does 'aliasing' attempt to achieve?
• Is 'aliasing' something that we should be using regularly?

• javascript
• angular
• typescript

Share Improve this question Follow asked Dec 25, 2016 at 8:15 ShadowCoreShadowCore 31922 gold badges55 silver badges1313 bronze badges 3

• It's up to you and your team style conventions – Valikhan Akhmedov Commented Dec 25, 2016 at 8:24
• If your bind input to private property it's better to follow ts styleguiders and prefix name with underscore, e.g. @Input('heroName') private _heroName – Valikhan Akhmedov Commented Dec 25, 2016 at 8:28
• "What does 'aliasing' attempt to achieve?" -- Using aliases allows for reliable and long-term testability of the UI. Of course as time goes by a codebase changes and variables are renamed, etc., but if aliases are regularly implemented then it allows for UI testing to be built out without worrying if variable name changes will break those UI tests. – Charles Commented Nov 18, 2020 at 11:24

Add a comment  | 

4 Answers 4

Sorted by: Reset to default 24

It's like your name and your nickname.

Inside your family you might be called Nic, where as , outside your family in order for other to know you legally , you should be called Nicolas.

So, if we consider the class of your component , the inside of your family :

@Component({
  selector:'my-component'
})
export class MyComponent{
   @Output('nicolas') nic  = new EventEmitter<any>();


   someFunction(){
    // because we're inside the family ( inside this class ), instead of nicolas , we can call nic like this : 

   this.nic ...... ( which you'd normally emit an event ).

  }

}

But from outside, you're still nicolas , so when someone want's to call you ( use that event emitter ) it should use nicolas;

 <my-component (nicolas)="onNicolasChanged($event)"></my-component>

Note that we can't do this :

 <my-component (nic)="onNicolasChanged($event)"></my-component>

This is aliasing that variable.

Also , please read my answer here :

• What does 'aliasing' attempt to achieve?

it simply renames the input/output variable as per your needs. For example, if there is a hero object and when it is selected it is passed to another component. In that case it would be appropriate to call it selectedHero . Aliasing simply achieves that.

@Input('selectedHero') hero: string;

• Is 'aliasing' something that we should be using regularly?

Depends on the context you are working on. Its not a necessity. For example it can be used to avoid conflicts in variable names , or for readability of the code.

Actually @Input is used when we are sending data of a parent component to child component and @Output is vice-versa. Example is

parent.component.html

<p> Child first name is {{childfirstname}}</p>
<input placeholder="First Name" type="text" [(ngModel)]="firstname">
<button mat-button (click)="send()">Click Parent</button>
<app-child
[firstname]="firstname"
(sendfirstname)="reciveFirstname($event)"
*ngIf="flage">
<app-child>

ParentComponent.ts

import { Component } from '@angular/core';
@Component({
  selector:.......
)}
export class ParentComponent {
  flage: boolean = false;
  firstname: string;
  childfirstname: string;
}
send() {
  this.flage = true;
}
reciveFirstname(firstname) {
  this.childfirstname = firstname;
}

Child.component.html

<p> Parent first name is {{firstname}} <br>
parent last name is {{lastname}} </p>
<input placeholder="First Name" type="text" [(ngModel)]="firstnamechild">
<button mat-button (click)="send">Send Parent</button>

child.component.ts

import { Component,Input, Output, EventEmitter } from '@angular/core';
@Component({
  selector:'app-child',
  ........
})
export class ChildComponent {
  firstnamechild: string;
  @Input() firstname: string;
  @Output()
  sendfirstname: EventEmitter<string> = new EventEmitter<string>();
  constructor() {}
  send() {
    this.sendfirstname.emit(this.firstnamechild);
  }
}

A good reason to use it is if you ever need to change the variable name in the component, you don't need to change it in your template because it's using the alias. It's a simple way to prevent your code from breaking if another dev ever changes that variable name.

本文标签： javascriptAngular 2 What is an InputOutput aliasStack Overflow