Question

我的主要HTML

<div>
  <block></block>
  <block></block>
</div>

我的组件

import {Component} from '@angular/core';
import {Observable} from 'rxjs/rx';
import {HTTP_PROVIDERS} from '@angular/http';
import {OnInit} from '@angular/core';
import {TestService} from './data.service'

@Component({
    selector : 'block',
    template : `
      <div class="col-lg-4" style="color:blue">{{_list && _list[0].name}}</div> 
`,
providers : [HTTP_PROVIDERS,TestService]
})
export class TestComponent implements OnInit{
    _list : any[];
    constructor(private _testDataService : TestService){}
    ngOnInit(){
        this._testDataService.getData()
            .subscribe(list => this._list = list);
    }

}

我想在同一页面中重用该组件，以显示不同服务调用的不同数据

Answer 1

我们可以通过将视图中的数据作为属性传递给Component来实现这一目的。

<div>
  <block test="block1"></block>
  <block test="block2"></block>
</div>

然后在组件中使用test装饰器获取@Input的值

import {Component} from '@angular/core';
import {Observable} from 'rxjs/rx';
import {HTTP_PROVIDERS} from '@angular/http';
import {OnInit} from '@angular/core';
import {TestService} from './data.service'

@Component({
  selector : 'block',
  template : `
    <div class="col-lg-4" style="color:blue">{{_list && _list[0].name}} 
    </div> 
    `,
  providers : [HTTP_PROVIDERS, TestService]
})
export class TestComponent implements OnInit{

  @Input() test;

  _list : any[];

  constructor(private _testDataService : TestService){}

  ngOnInit(){
    this._testDataService.getData(this.test)
      .subscribe(list => this._list = list);
  }
}

从视图中接收到值后，将其传递给服务，具体取决于您获取数据。

无论角度在视图中看到选择器，它都会创建一个新的实例。

Angular2 ..使用相同的组件在同一页面上显示不同的数据，具体取决于服务响应/重用组件

1 个答案: