コンポーネントを共有するときに入力名が異なる必要があるのはなぜですか？

Question

私は、フィーチャーアイテムの変数を「入力」から「検索」に変更するまで、フィーチャーアイテムのアイテム数を取得できなかったのはなぜですか？以下は私の特色-item.component.htmlです：

以下

<rb-featured-item [search]="searchFeaturedItem" [isWhole]="isWhole" 
[minMax]="isFeaturedMin"> 
</rb-featured-item> 
<rb-product-list [searchType]="searchType" [subType]="subType" 
[input]="searchStr" > 
</rb-product-list> 

は私の特色-item.component.tsです：

以下

searchStr: string; 
searchType: string; 
subType: string; 

searchFeaturedItem: string = 'cell phones'; // show all featured items in cell phones.. 
isFeaturedMin: boolean = true; 
isWhole: boolean = true; 

ngOnInit() { 
    this.searchStr = 'cell phones';  // product-list searches for all cell phones in su-category.. 
    this.searchType = 'sub-category'; 
    this.subType = 'none'; 
    window.scrollTo(0, 0); 
} 

は私の特色-items.component（共有コンポーネント）です。これは私が「検索」から「入力」に変更するまで、私のコードが項目の数を取得できない場所です。製品リストには、

<rb-product-list [input]> //and 
<rb-featured-item [input]> 

が表示されています。なぜエラーが発生しますか？私の発見を分かち合っているので、私の質問に投票しないでください。

//selector: 'rb-featured-item' -- see top 
export class FeaturedItemComponent implements OnInit, OnChanges { 

    @Input ('search') searchStr: string; // ** errors if 'input' instead of 'search'*** 
    @Input('width') mainWidth: number; 
    @Input ('leftMargin') mainLeftMargin: string; 
    @Input('isWhole') isWhole: boolean; 
    @Input('minMax') isMin: boolean; 
    featuredItems: FeaturedItem[] = []; 
    isFeatured: boolean; 

Answer 1

入力が有効な@inputバインディングの名前です。エラーなく使用できます。エラーがある場合は、入力として名前を使用したという事実とは関係ありません。これをテストするために、私は "someName"のような入力とは違う名前を試して、まだ問題に遭遇しているかどうかを確認します。そうでない場合は、すでに他の方法でそのコンポーネントに「INPUT」をバインドしていることを意味します。副作用では、クラス変数の名前をテンプレート変数と違う名前にするのは避けています。事態が本当に混乱するためです。例えば、

は、次の操作を行います。

@Input ('search') search: string; 

ない、これを：

@Input ('search') myValue: string; 

何も壊れていないだろう、それだけでより一貫性です。

また、簡単に推測される変数も避けるべきです。たとえば、あなたが持っている：

isFeaturedMin: boolean = true; 

をあなたはブールとしてタイプを記述しているが、あなたはすでにブール値としてそれをインスタンス化しているので、それはboolean型であることを宣言する必要はありません。いくつかの他の言語（私はC +だと思う）で、これは有効であるだろうが、活字体では、これら二つのうちの一つでなければなりません：

isFeaturedMin = true; // Typescript knows it's a 
// boolean and you can never assign any other value that is not a boolean. 

または

isFeaturedMin: boolean; 

// later in your code: 
isFeaturedMin = true;