为什么共享组件时输入名称必须不同？

Question

我很难弄清楚为什么我的代码无法获得特色项目中的项目数量，直到我从＆＃34;输入＆＃34;到＆＃34;搜索＆＃34;在特色项目中。以下是我的featured-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>

以下是我的featured-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);
} 

以下是我的featured-items.component（共享组件）。这是我的代码无法获得项目数量的地方，直到我从＆＃39; search＆＃39;输入＆＃39;。是因为产品清单有

<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绑定名称。它可以毫无错误地使用。如果您遇到错误，则与使用输入作为名称这一事实无关。为了测试这个，我会尝试一个不同于输入的名称，例如＆＃34; someName＆＃34;看看你是否还遇到问题。如果你不是，那就意味着你已经绑定了＆＃34; INPUT＆＃34;以某种其他方式到该组件。另外，我会避免以与模板变量不同的方式命名类变量，因为事情会变得非常混乱。例如，

这样做：

@Input ('search') search: string;

不是这个：

@Input ('search') myValue: string;

什么都不会破坏，它更加一致。

您还应避免使用简单的推断变量。例如，您有：

isFeaturedMin: boolean = true;

您将类型声明为布尔值，但您已将其实例化为布尔值，因此无需声明它是布尔值。在其他一些语言中（我认为是C +），这是有效的，但在Typescript中，它应该是这两种语言之一：

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;