Question

我在深度搜索后发布此问题。有类似的问题，但没有一个问题解决了。主要是我跟着Angular2文件。而且我对Angular2完全不熟悉。

我的问题是，

如何通过传递不同的参数在同一页面中重用相同的angular2组件，让我们说给组件一个唯一的名称。

ex：在两个不同的标签中创建两个相同类型的组件，如Component1＆amp; COMPONENT2

它渲染组件，但是，它没有捕获我传递的参数。

Component.ts

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

@Component({
  selector: 'txt-comp',
  template: '<h1>Hello, This is {{name}}!</h1>',
})

export class txtComponent{
  @Input() name: string;

 ngOnInit()
 {
   console.log(this.name);
 }

}

Home.aspx

 <txt-comp [name]="Welcome"></txt-comp>

渲染页面时，仅显示

**Hello, This is**

当我创建两个实例时，如

 <txt-comp [name]="Welcome1"></txt-comp>
 <txt-comp [name]="Welcome2"></txt-comp>

只渲染一个实例。

有人可以解释我的错误以及实现这一目标的正确方法吗？

谢谢。

Answer 1

添加单引号，angular预期＆＃34; Welcome1＆＃34;和＃34; Welcome2＆＃34;是变量

<txt-comp [name]="'Welcome1'"></txt-comp>
<txt-comp [name]="'Welcome2'"></txt-comp>

Answer 2

如J Pinxten所述，您可以这样做

<txt-comp [name]="'Welcome1'"></txt-comp>
<txt-comp [name]="'Welcome2'"></txt-comp>

或

<txt-comp name="Welcome1"></txt-comp>
<txt-comp name="Welcome2"></txt-comp>

当您使用[]时，它希望在您的ts代码中使用表达式或变量或该类型的值，因为您要传递字符串，您需要使用"'Welcome1'"，或使用没有约束力

请注意，因为name是html元素的已知属性，可能会产生一些混淆，因此最好使用其他名称，例如componentName或..

Answer 3

首先，在Angular世界中，请停止使用单词“ Parameter”，当您说参数意味着您试图处理params数组（查询参数或类似参数）时，您只是在尝试传递一个输入您的组件，因此请遵循该术语。

以下应该有效

解决方案一，在您的组件中

name: string = 'Welcome'

在您的模板中使用

<txt-comp [name]="name"></txt-comp>

OR

直接在您的模板中使用它（不带括号）

<txt-comp name="Welcome"></txt-comp>

或将此与括号一起使用

<txt-comp [name]="'Welcome'"></txt-comp>

重用＆amp;参数在Visual Studio 2015中传入Angular2组件

3 个答案: