Повторное использование и передача параметров в компоненте Angular2, в Visual Studio 2015 - PullRequest
Новая
       8

Повторное использование и передача параметров в компоненте Angular2, в Visual Studio 2015

0 голосов
/ 07 мая 2018

Я публикую этот вопрос после глубокого поиска. Есть похожие типы вопросов, но ни один из них не решил проблему. В основном я следовал за Angular2 Document. И я совершенно новичок в Angular2.

Передача параметров Angular2

Моя проблема в том,

  1. Как повторно использовать один и тот же компонент angular2 на той же странице, передавая различные параметры, скажем, давая уникальное имя компоненту.

ex: Создать два компонента одного типа в двух разных метках, как Component1 & 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>

рендеринг только одного экземпляра.

Может ли кто-нибудь объяснить мне, что я сделал неправильно, и как мне этого добиться?

Спасибо.

Ответы [ 3 ]

0 голосов
/ 07 мая 2018

Как уже упоминалось 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>

Когда вы используете [], вы ожидаете использовать выражение или переменную в вашем тскод или значение этого типа, так как вы хотите передать строку, вам нужно использовать "'Welcome1'" или использовать ее без привязки

Просто обратите внимание, поскольку name является известным атрибутом для HTML-элементов, которые он может сделатьнекоторые путаницы, поэтому лучше использовать другое имя, например componentName или ..

0 голосов
/ 01 июля 2018

Прежде всего, просьбы прекратить использовать слово «Параметр» в угловом мире, когда вы говорите, что это означает параметры, вы пытаетесь работать с массивом параметров (параметры запроса или аналогичные), поэтому вы просто пытаетесь передать вход в ваш компонент, так что придерживайтесь этой терминологии.

Следующее должно работать

Решение одно, в вашем компоненте 

name: string = 'Welcome'

А в вашем шаблоне используйте 

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

OR

используйте это прямо в вашем шаблоне (без скобок) 

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

OR используйте это с кронштейном 

<txt-comp [name]="'Welcome'"></txt-comp>
0 голосов
/ 07 мая 2018

добавить одинарные кавычки, angular ожидает, что "Welcome1" и "Welcome2" являются переменными 

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