2016-12-25 8 views
1

@Input()@Output()については、デコレータのプロパティ名の代わりにエイリアスを使用できることがわかりました。角2:@ Input/@ Outputエイリアスとは何ですか?

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> 

公式角度documentationは言う:

時には我々は、入力/出力プロパティのパブリック名になりたいです差分内部名からのt。 これは属性ディレクティブでよく発生します。ディレクティブの消費者は、ディレクティブの名前にバインドすることを期待しています。たとえば、myClickセレクタを含むディレクティブをタグに適用すると、myClickとも呼ばれるイベントプロパティにバインドされます。

そしてThisチュートリアルでは、簡単にそれを説明する:

エイリアスは私がされていないものより

その他の代わりに、元のプロパティ名の別名であることをプロパティ名を上書きしてみましょうSOまたはGoogleを使用して、別名@Input()@Output()で何かを見つけることができます。

  • 'エイリアス' の試みは何を達成するん:私が知りたいのですが

    物事はですか?

  • 定期的に使用する必要がある「エイリアシング」ですか?
+0

あなたとあなたのチームスタイルの規約に従います –

+0

プライベートプロパティへのバインド入力の場合は、tsスタイルガイドと接頭辞名の後にアンダースコア(例: @Input( 'heroName') プライベート_heroName –

答えて

3

あなたの名前とあなたのニックネームのようです。

あなたの家族の中であなたはニコラスと呼ばれるかもしれませんが、あなたの家族の外で、他人が法的にあなたを知るためには、あなたはニコラスと呼ばれるべきです。だから、

、私たちはあなたのコンポーネントのクラス、あなたの家族の内部検討する場合:

@Coponent({ 
    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). 

    } 

} 

しかし、外部からの、あなたはまだニコラスしているので、誰かがのは、そのイベント・エミッターを使用して(あなたを呼び出したいです)ニコラスを使うべきです。我々はこれを行うことはできません

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

注:

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

これは、その変数をエイリアシングされます。

また、私の答えhereお読みください:それは使用していますので、あなたがこれまでのコンポーネントで変数名を変更する必要がある場合はそれを使用する十分な理由がある

+0

良い説明。角度のあるスタイルのガイドは、本当に必要な場合を除き、使用を避けるようアドバイスしています。 https://angular.io/guide/styleguide#avoid-aliasing-inputs-and-outputs –

1
  • 「エイリアシング」は何を達成しようとしていますか?

あなたの必要に応じて入出力変数の名前を変更するだけです。たとえば、heroオブジェクトがあり、選択されている場合は、別のコンポーネントに渡されます。その場合はselectedHeroと呼ぶのが適切です。エイリアシングは単純にそれを実現します。

@Input('selectedHero') hero: string; 
  • たちは定期的に使用しなければなりません 'エイリアス' 何かか?

作業しているコンテキストによって異なります。その必要はありません。たとえば、変数名の競合やコードの可読性を避けるために使用できます。

0

を、あなたのテンプレートでそれを変更する必要はありませんエイリアス。これは、別のdevがその変数名を変更した場合にコードが壊れるのを防ぐ簡単な方法です。

関連する問題