wie ich eine Komponente erstellen, die ich abrufen URL-Daten in einem Attribut in Winkel 2

Question

Ich versuche, eine Anwendung mit Winkel 2 zu erstellen, ich möchte eine Komponente in Winkel 2, die ich URL in Attribut festlegen und wollen mehrere Male von dieser Komponente verwenden und jede Komponente eigene Daten haben ... Ich möchte etwas wie das: ist es möglich oder nicht?

Ich werde wirklich schätzen, wenn mir jemand hilft.

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); 
    } 
} 

Wenn die Komponente mehr als einen Eingang hat, dann müssen Sie überprüfen, welche aktualisiert wurde. Weitere Informationen finden Sie unter https://angular.io/api/core/OnChanges.

Answer 2

Sie können compoenent wie oben erwähnt beantworten. Aber für diese Art von Aufgabe wähle ich immer Direktive. Sie können auch eine Direktive erstellen, die einen Parameter übernimmt und das Zeug macht.

Auf diese Weise müssen Sie kein Tag erstellen, aber in jedem Tag können Sie Ihre Anweisung anwenden.

@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); 
    } 
} 

können Sie diese Richtlinie auf jedes Element anwenden wie diese

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