Ändern von CSS über @Input in Angular 2/4

Question

Ich versuche, meine Anwendung zu rationalisieren, indem Sie eine einzelne Vorlage verwenden, um auf ein benutzerdefiniertes Element zu verweisen, und dann den Inhalt über den Eigenschaftsdecorator @Input() angeben. Die Methode, die ich benutze, funktioniert nicht und ich bin nicht sicher, warum, mein Code wie folgt:

Component.ts

import { Component, OnInit, Input } from '@angular/core'; 

@Component({ 
    selector: 'side-menu-option', 
    templateUrl: './side-menu-option.component.html', 
    styleUrls: ['./side-menu-option.component.css'] 
}) 
export class SideMenuOptionComponent implements OnInit { 

    @Input() icon: string; // Inputs 
    @Input() text: string; 

    constructor() { } 

    ngOnInit() { 
    } 

} 

Component.html

<button class="buttons button-style btn-block" type="button"><i class="mdi mdi-{{icon}}"></i><span class="menu-text">{{text}}</span></button> 

OtherComponent.html

<div class="side-nav text-center"> 
    <div class="side-nav-container"> 
    <img class="avatar" src="http://placehold.it/150x150"> 
    <side-menu-option [icon]="home" [text]="Home"></side-menu-option> 
    <side-menu-option [icon]="file-document" [text]="Documents"></side-menu-option> 
    </div> 
</div> 

[Symbol] und [Text] werden aus irgendeinem Grund nicht erkannt und ich bin nicht sicher warum. Es hat funktioniert, bevor ich versucht habe, es zu refaktorisieren, aber aus irgendeinem Grund werden diese Eingänge nicht geladen.

Dank

Answer 1

Nun, Sie müssen verstehen, dass [icon]="statement here" eine Erklärung nimmt aber Sie übergeben eine Zeichenfolge, so dass Sie wieder Ihre Zeichenfolge in Anführungszeichen wickeln müssen, um es explizit eine Zeichenfolge zu machen.

<div class="side-nav text-center"> 
    <div class="side-nav-container"> 
    <img class="avatar" src="http://placehold.it/150x150"> 
    <side-menu-option [icon]="'home'" [text]="'Home'"></side-menu-option> 
    <side-menu-option [icon]="'file-document'" [text]="'Documents'"></side-menu-option> 
    </div> 
</div> 

Hinweis: Dies ist auch eine gute Übung, weil man es betrachten kann und wird wissen, dass diese Eingabeeigenschaften sind aber wenn Sie diese Klammern [] entfernen können sie für Attribute leicht verwechselt werden. Nur wollen erwähnen, gibt es keinen Schaden in beiden Ansatz.

Answer 2

binden, ohne Klammern, wenn Ihre Eingaben nicht alle Eltern sind Attribute

<div class="side-nav text-center"> 
    <div class="side-nav-container"> 
    <img class="avatar" src="http://placehold.it/150x150"> 
    <side-menu-option icon="home" text="Home"></side-menu-option> 
    <side-menu-option icon="file-document" text="Documents"></side-menu-option> 
    </div> 
</div> 

Answer 3

<div class="side-nav text-center"> 
    <div class="side-nav-container"> 
    <img class="avatar" src="http://placehold.it/150x150"> 
    <side-menu-option icon="home" text="Home"></side-menu-option> 
    <side-menu-option icon="file-document" text="Documents"></side-menu-option> 
    </div> 
</div> 

die Eigenschaft Bindungssyntax entfernen ([] Klammern) für die Eingangseigenschaften in übergeordneter Komponente ([ Artikel] => Artikel)

Answer 4

EDIT: Ich habe zuerst die Frage missverstanden, das Problem ist eigentlich, dass Sie 'value' für Ihre verwenden sollten Werte, weil Angular nach Variablen namens home, file-document und so weiter sucht. Sie sollten diese stattdessen verwenden:

<side-menu-option [icon]="'home'" [text]="'Home'"></side-menu-option> 
<side-menu-option [icon]="'file-document'" [text]="'Documents'"></side-menu-option>