带有参数的Angular 2路由重新初始化组件onInit

Question

当我使用新参数路由到组件时，我遇到了一个问题，即我的组件正在重新初始化。这是我的路线。

const appRoutes: Routes = [
  { path: '', component: MyNewComponentComponent },
  { path: 'tiles', component: DisplayTileData },
  { path: 'tiles/:master/:filters', component: DisplayTileData } 
];

我路由到“图块”并进行服务调用以获取一些数据。然后，我有几个按钮可以返回到具有“master”和“filters”值的相同组件。使用参数路由回组件会重新初始化组件并重复服务调用。我在页面上也有一个文本输入。当我第一次路由到该组件并添加文本时，带有参数的路由也会清除该文本。

<a *ngFor="let tile of tiles">{{tile.id}}</a><br/><br/>

<input class="form-control" maxlength="30" minlength="3" name="from" ng-reflect-maxlength="30">
<button (click)="addNumberToFilter(15)"></button>
<button (click)="addNewMasterPath('do')">add new Number to Filter</button>

有没有办法在使用新参数进行路由时防止此路由重新初始化。

我有按钮的默认值。方法如下。

public variable: any = [3,4];
public master: any = 'eat';

addNewMasterPath(newMasterVariable) {
    this.master = this.master + '-' + newMasterVariable;
    var newMap = this.variable.map(items => { return items}).join('-');
    this.router.navigate(['tiles/', this.master, newMap]);
}

addNumberToFilter(newParameter) {
    this.variable.push(newParameter);
    var newMap = this.variable.map(items => { return items}).join('-');
    this.router.navigate(['tiles/', this.master, newMap]);
}

Answer 1

使用参数路由回组件会重新初始化组件并重复服务调用。

那是因为你去的新路线在你的应用程序中被指定为不同的路线。对于不重新初始化的组件，它必须是相同的路由。

我在这里看到了不同的可能性，具体取决于您的具体情况：

如果您只加载 /tiles 进行服务调用，然后路由到 tiles/:master/:filters，但 /tiles 组件在不接收此数据的情况下没有意义，您可以考虑使用解析器进行 API 调用，然后只有tiles/:master/:filters 路由。

从official docs，您可以在解析器中进行服务调用：

@Injectable()
export class MasterFiltersResolver implements Resolve<MasterFilter> {
  constructor(private cs: MasterFiltersService, private router: Router) {}
  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<Crisis> {
    let id = route.params['id'];
    return this.cs.getData(id).then(data => {
      if (data) {
        return data;
      }
    });
  }
}

然后在您的路线中，您可以将其指定为：

{ path: '', component: MyNewComponentComponent },
{ path: 'tiles/:master/:filters', component: DisplayTileData, 
    resolve: {
        masterFilters: MasterFilterResolver
    } 
} 

这样，它会在加载组件之前检索您需要的数据。

如果您的 /tiles 路由组件作为一个没有 master 和过滤数据的独立组件有意义：

在这种情况下，您可以使用可选参数。

当有可选参数时，你的路由定义中只有这条路由

{ path: '', component: MyNewComponentComponent },
{ path: 'tiles', component: DisplayTileData }

然后通过router.navigate('/tiles', {master: '', filter: ''}导航到这条路线。

在这种情况下，您的组件将需要以下内容：

constructor(private route: ActivatedRoute) {}

this.route.params.subscribe(params => {
  // do something
});

this.route.params 是可观察的参数，因此您可以对任何更改做出反应以执行异步操作。

Answer 2

我使用了不同的方法，在我的组件中监听 Activated 路由

import { ActivatedRoute } from '@angular/router';

constructor(
private route: ActivatedRoute
) {
  this.route.url.subscribe(url =>{
      /* Your function*/
  });
}