Warum muss der Eingabename beim Teilen der Komponenten unterschiedlich sein?

Question

Ich hatte einen schwierigen Versuch herauszufinden, warum mein Code die Anzahl der Artikel in den Featured Items nicht bekommen konnte, bis ich die Variable von "Eingabe" auf "Suche" in den Featured Items änderte. Unten ist mein vorge-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> 

Unten ist mein vorge-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); 
} 

Unten ist mein vorge-items.component (gemeinsam genutzte Komponente). Dies ist, wo mein Code die Anzahl der Elemente nicht erhalten kann, bis ich von 'Suche' zu 'Eingabe' gewechselt habe. Ist es, weil Produktliste hat

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

warum bekomme ich einen Fehler? Bitte stimmen Sie meine Frage nicht ab, da ich nur meine Entdeckung teile.

//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

Eingabe ein gültiger @input Namensbindung. Es kann ohne Fehler verwendet werden. Wenn Sie Fehler haben, hat dies nichts mit der Tatsache zu tun, dass Sie Eingabe als Name verwendet haben. Um dies zu testen, würde ich einen anderen Namen als Eingabe versuchen, wie "someName" und sehen, ob Sie immer noch auf Probleme stoßen. Wenn dies nicht der Fall ist, bedeutet dies, dass Sie "INPUT" für diese Komponente bereits anderweitig gebunden haben. Nebenbei bemerkt, würde ich vermeiden, Ihre Klassenvariablen anders als die Vorlagenvariablen zu benennen, da die Dinge wirklich verwirrend werden. Zum Beispiel

dies tun:

@Input ('search') search: string; 

nicht dieses:

@Input ('search') myValue: string; 

Nichts bricht, es ist nur konsequenter.

Sie sollten auch trivial abgeleitete Variablen vermeiden. Zum Beispiel haben Sie:

isFeaturedMin: boolean = true; 

Sie sind unter Angabe der Art, wie boolean, aber sie sind es bereits als boolean instanziiert wird, so gibt es keine Notwendigkeit zu erklären, dass es sich um ein boolean ist. In einigen anderen Sprachen (ich glaube, C +), dies wäre gültig, aber in Typoskript, sollte es eine der beiden sein:

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

oder

isFeaturedMin: boolean; 

// later in your code: 
isFeaturedMin = true;