如何创建一个组件，我可以设置在角度2属性中获取url数据

我想创建一个角度为2的应用程序，我想创建一个角度为2的组件，我在属性中设置URL并且想要从这个组件使用几次，每个组件都有自己的数据... 我想要这样的事情：它的可能与否？如何创建一个组件，我可以设置在角度2属性中获取url数据

如果有人帮我，我会很感激。

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

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

来源

2016-04-25 Alireza Valizade

@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。

来源

2016-04-25 07:12:07

这对每个组件的工作？ –

不确定你的意思是“每个组件”。您可以根据需要添加尽可能多的该组件实例。这些实例独立工作。你需要在某处添加'HTTP_PROVIDERS'（例如在你的Angular应用程序的根组件中。@Component（{...，providers：[HTTP_PROVIDERS]，...}）' –

你可以使用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>

来源

2017-09-13 19:55:29

如何创建一个组件，我可以设置在角度2属性中获取url数据

回答

相关问题