通過@Input在Angular中更改CSS 2/4

我試圖通過使用單個模板引用自定義元素來簡化我的應用程序，然後通過@Input（）屬性裝飾器指定內容。我使用的方法是行不通的，我不知道爲什麼，我的代碼如下：通過@Input在Angular中更改CSS 2/4

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>

[圖標]和[文字]由於某種原因未被識別，我不知道爲什麼。在我嘗試重構它之前它工作正常，但由於某些原因，這些輸入未被加載。

由於

來源

2017-06-29 Jarred Parr

那麼你要明白，[icon]="statement here"帶有一個語句，但你傳遞一個字符串，所以你必須重新包裝你的引號字符串，使其字符串明確。

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

注：這也是一個很好的做法，因爲人們可以看到它，就知道這些都是輸入性，但如果你刪除這些括號[]，他們可以爲屬性很容易混淆。只是想提，這兩種方法都沒有什麼壞處。

來源

2017-06-29 14:18:16

綁定不帶括號如果輸入沒有任何父屬性

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

來源

2017-06-29 13:59:13

哇，我覺得很傻。我會試試這個謝謝你！ –

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

在父組件的輸入屬性中刪除屬性綁定語法（括號[]）（[ item] => item）

來源

2017-06-29 14:04:08 praveen

編輯：我首先誤解了這個問題，問題其實是你應該用你的'value'值，因爲Angular會查找名爲home，file-document等的變量。你應該使用這樣的：

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

來源

2017-06-29 14:10:34

這是一個更好的方法，而不是簡單地刪除括號？ –

@JarredParr我認爲Raheel Anwar在他的回答中回答了你的問題。 –

通過@Input在Angular中更改CSS 2/4

回答

相關問題