Question

我试图通过使用单个模板来引用自定义元素来简化我的应用程序，然后通过@Input（）属性装饰器指定内容。我使用的方法不起作用，我不知道为什么，我的代码如下：

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>

[icon]和[text]由于某种原因未被识别，我不确定原因。它在我尝试重构之前有效，但由于某些原因，这些输入没有被加载。

由于

Answer 1

嗯，你必须明白[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>

注意：这也是一个很好的做法，因为人们可以查看它并知道这些是输入属性但是如果你删除它们括号[]它们很容易混淆属性。只是想提到，两种方法都没有坏处。

Answer 2

如果您的输入不是任何父属性

，则不带括号绑定

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

删除父组件中输入属性的属性绑定语法（[]括号）（[item] =＆gt; item）

Answer 4

编辑：我首先误解了这个问题，问题实际上是你应该使用'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>

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

4 个答案: