Angular2 Создать компонент

Question

Я хотел создать новый компонент в angular2 со специфическими свойствами, так что я могу иметь тег для использования в качестве этого

<my-cmp type="Type1"></my-cmp> 

Я пытался много примеров, но не один из них не работал. Если у кого-нибудь есть рабочий пример, пожалуйста, помогите мне поблагодарить вас.

Благодаря Халеда

Answer 1

Вы можете играть с my test repository (сделано для presentation я сделал о подготовке к Угловой 2.0)

Надеется, что это помогает ...

EDIT

Еще один интересный ресурс - playground repository, который я создал, экспериментируя с ngUpgrade. Однако эта функция не является общедоступной для текущей версии Angular 2.0 (alpha 45), но я демонстрирую ее использование, импортируя модуль из исходного кода Angular.

Answer 2

Здесь вы находитесь. См. this plunker. Написанная в машинописном:

import {Component, Input} from 'angular2/angular2' 

@Component({ 
    selector: 'my-cmp' 
    template: ` 
    <div> 
     <b>Type:</b> {{ type }} 
    </div> 
    ` 
}) 
class MyComponent { 
    @Input() type; 
} 

@Component({ 
    selector: 'my-app', 
    directives: [MyComponent], 
    template: ` 
    <my-cmp type="Static Type"></my-cmp> 
    <my-cmp [type]="dynamicType + dynamicTypeIndex"></my-cmp> 
    ` 
}) 
export class App { 
    dynamicType: string = 'Dynamic Type '; 
    dynamicTypeIndex: number = 0; 

    constructor() { 
    setInterval(() => ++this.dynamicTypeIndex, 1000); 
    } 
} 

Answer 3

Самый простой ответ @Component аннотацию преобразовать любой класс машинопись к компоненту angular2. Любой класс машинописного текста, аннотированный как @Component ({}), является угловым компонентом. Как вы можете видеть в предыдущем ответе, 2 класса аннотируются с @Component. Компонент принимает объект json в качестве параметра, чтобы указать angular2, каким будет поведение компонента.

@Component({ 
     selector: 'my-app', //will be user in html as tag/attribut 
     template: ` //the html injection etc 
     <my-cmp type="Static Type"></my-cmp> 
     <my-cmp [type]="dynamicType + dynamicTypeIndex"></my-cmp> 
     ` 
    }) 
    export class AppCompoment { //we exported this class/component so that it can be imported 

    }