当对象内的数据发生更改时,子组件不会更新

时间:2018-01-12 09:29:14

标签: angular routes nested-routes

我有AppComponent,我在其上定义了路由。 在那里,我有一个类似Home/Scan/:name的设置,其中我有多个名称,它们调用不同的GET服务,它接受名称作为参数。

我已将[routerLink]="['Scanning',r.name]"定义为链接。我的子组件没有使用新数据刷新。请告诉我我做错了什么。

const routes: Routes = [
{ path: 'Home', component: ReportComponent,children:[
{ path: 'Scanning', component: ScanningOutputComponent},
{ path: 'Scanning/:name',component: ScanningOutputComponent }
 ]},
{ path: '',redirectTo:'Home', pathMatch:'full' },
{ path: '**',redirectTo:'Home', pathMatch:'full' }
];

更新了代码。

从ReportComponent接收以下代码的参数。

  this.aRoute.params.subscribe(params => this.sub = params['name']);
switch (this.sub) {
  case 'All':
    this.http.get('http://192.168.117.107:8080/rest/ScanningOutput/all')
      .subscribe(data => {
        this.scanningdata = data;
        //console.log(data);
      });
    break;
  case 'POD':
    this.http.get('http://192.168.117.107:8080/rest/ScanningOutput/ByDevice/POD')
      .subscribe(data => {
        this.scanningdata = data;
        //console.log(data);
      });
    break;
  case 'PUP':
    this.http.get('http://192.168.117.107:8080/rest/ScanningOutput/ByDevice/PUP')
      .subscribe(data => {
        this.scanningdata = data;
        //console.log(data);
      });
    break;
  case 'REX':
    this.http.get('http://192.168.117.107:8080/rest/ScanningOutput/ByDevice/REX')
      .subscribe(data => {
        this.scanningdata = data;
        //console.log(data);
      });
    break;
  default:
    console.log("invalid");
    break;
}

2 个答案:

答案 0 :(得分:0)

您已经编写了scanning,其中您已经定义了路由,并且您在路由器链接中传递了scan

答案 1 :(得分:0)

尝试在订阅部分中声明开关:

this.aRoute.params.subscribe(params => { 
        this.sub = params['name'];
        switch (this.sub) {
            case 'All':
                this.http.get('http://192.168.117.107:8080/rest/ScanningOutput/all')
                    .subscribe(data => {
                        this.scanningdata = data;
                        //console.log(data);
                    });
                break;
            ...
            default:
                console.log("invalid");
                break;
        }
    });