Как назвать компонент несколько раз в Угловом 2

Я новичок в Угловом 2. Я просто создал базовый компонент в угловом 2. Компонент работает, но когда я вызываю компонент несколько раз в HTML, он работает только для первого вызова.Как назвать компонент несколько раз в Угловом 2

Ниже app.component.ts

import {Component} from 'angular2/core'; 
import {bootstrap} from 'angular2/platform/browser' 


@Component({ 
    selector: 'click-me', 
    template: `<input #box (keyup.enter)="values=box.value" 
      (blur)="onKey(box.value)" />`    
}) 

export class AppComponent { 

    clickMessage = ''; 
    onKey(value: string) { 

    } 

    onClickMe() {  
     this.clickMessage = 'You are my hero!'; 
    } 

bootstrap(AppComponent);

Когда я использую '<click-me></click-me>' в моих главных index.html несколько раз, он работает на первой.

Ниже index.html

<html> 
<script> 
      System.config({ 
      packages: {   
       app: { 
       format: 'register', 
       defaultExtension: 'js' 
       } 
      } 
      }); 
      System.import('app/app.component') 
       .then(null, console.error.bind(console)); 
     </script> 
     </head> 
     <!-- 3. Display the application --> 
     <body> 

<click-me></click-me> 
<click-me></click-me> 
     </body> 
    </html>

источник

2016-03-15 sarath

Причина, по которой это происходит, заключается в том, что вы пытаетесь загрузить корневой элемент с несколькими экземплярами. Исходя из угловых 1, думать о методе bootstrap в угловых 2 как ng-app эквиваленте в угловом 1.

Чтобы преодолеть эту проблему, просто создать новый компонент и импортировать его в корень AppComponent. Таким образом, вы можете использовать его несколько раз и по-прежнему передавать один экземпляр в свой метод bootstrap.

Это будет выглядеть примерно так:

import {bootstrap} from 'angular2/platform/browser' 
import {Component} from 'angular2/core'; 
import {DuplicateComponent} from 'app/duplicate.component.ts'; 

@Component({ 
    selector: 'my-app', 
    template: "<click-me></click-me><click-me></click-me>", 
    directives: [DuplicateComponent] 
}) 
export class AppComponent { } 

bootstrap(AppComponent);

, а затем компонент вы хотите, чтобы дублировать будет содержать текущую логику

import {Component} from 'angular2/core'; 

@Component({ 
    selector: 'click-me', 
    template: `<input #box (keyup.enter)="clickMessage=box.value" 
      (blur)="onKey(box.value)" /> 
      <button (click)="onClickMe()">Click</button>` 
}) 

export class DuplicateComponent { 
    clickMessage = ''; 
    onKey(value: string) { } 

    onClickMe() { 
     this.clickMessage = 'You are my hero!'; 
    } 
}

Он по-прежнему появляется ваша логика немного откусил, но Я думаю, что вы ищете что-то в этом направлении:

http://plnkr.co/edit/jcl7kZ4MzRBtL5WykoJj?p=preview

источник

2016-03-15 13:51:22

Существовал ошибка в старых бета-версий. Попробуйте обновить до последней версии углового2.

источник

2016-03-15 11:11:31 muetzerich

Как я могу обновить до последней версии. Это в бета-версии прямо сейчас? – sarath

с обновлением npm – muetzerich

обновлено. но все еще есть проблема. :-( – sarath

Как назвать компонент несколько раз в Угловом 2

ответ

Смежные вопросы