Как создать компонент, который я могу установить выборку данных url в атрибуте в угловом 2

Question

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

Я буду очень признателен, если кто-нибудь мне поможет.

new movies : 
<comp url="www.aaaa.com/movies?type=new"></comp> 

old movies : 
<comp url="www.aaaa.com/movies?type=old"></comp> 

Answer 1

@Component({ 
    selector: 'comp', 
    template: '<div>{{data}}</div>' 
}) 
export class Component { 
    @Input() url: string; 
    constructor(private http:Http) { 
    } 

    ngOnChanges(changes) { 
    this.http.get(this.url) 
    .map(res => res.json()) 
    .subscribe(val => this.data = val); 
    } 
} 

Если компонент имеет более одного входа, то вам необходимо проверить, какой был обновлен. См. https://angular.io/api/core/OnChanges для более подробной информации.

Answer 2

Вы можете использовать compoenent, как указано выше. Но для этой задачи я всегда выбираю директиву. Вы также можете создать директиву, которая будет принимать один параметр и делать материал.

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

@Directive({ 
    selector: '[comp]', 
}) 
export class compDorective implements OnInit { 
    @Input() url: string; 
    constructor(private http:Http, private elementRef: ElementRef) { 
    } 

    ngOnInit(changes) { 
    this.http.get(this.url) 
    .map(res => res.json()) 
    .subscribe(val => this.elementRef.nativeElement.innerHtml = val); 
    } 
} 

вы можете применить эту директиву к любому элементу, как этот

<div comp [url]="www.aaaa.com/movies?type=new"></div> 
<span comp [url]="www.aaaa.com/movies?type=old"></span>