带有参数的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路由。

从官方文档开始，您可以在解析器内部进行服务调用：

@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路由组件可以作为没有主组件并过滤数据的独立组件有意义：

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

当具有可选参数时，您的路线定义上将只有该路线

{ 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 是可观察到的参数，因此您可以对任何更改做出反应以执行异步操作。