时间戳

首页 > 解决方案 > 在 Visual Studio 2015 中重用和传递 Angular2 组件的参数

angular - 在 Visual Studio 2015 中重用和传递 Angular2 组件的参数

问题描述

我在深入搜索后发布了这个问题。有类似类型的问题，但没有一个能解决问题。主要是我关注了 Angular2 文档。我对 Angular2 完全陌生。

Angular2参数传递

我的问题是，

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

例如：在两个不同的标签中创建两个相同类型的组件，如 Component1 和 Component2

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

组件.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);
 }

}

主页.aspx

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

呈现页面时，仅显示，

**Hello, This is**

当我创建两个实例时，如

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

只渲染一个实例。

有人可以向我解释我做错了什么以及实现这一目标的正确方法吗？

谢谢你。

标签： angularvisual-studio-2015

解决方案

添加单引号，角度期望“Welcome1”和“Welcome2”是变量

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

推荐阅读