Question

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

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

我路由到＆＃34;瓷砖＆＃34;并进行服务调用以获取一些数据。然后我有几个按钮路由回到相同的组件，其值为＆＃34; master＆＃34;和＆＃34;过滤器＆＃34;。使用参数路由回组件会重新初始化组件并重复服务调用。我在页面上也有一个文本输入。当我第一次路由到此组件并添加文本时，带参数的路径也会擦除该文本。

<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

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

这是因为您前往的新路线在您的应用程序中被指定为不同的路线。对于不重新初始化的组件，它必须是相同的路径。

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

如果您只加载/ tile进行服务调用然后路由到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路由组件作为没有主数据和过滤数据的独立组件有意义：

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

当拥有可选参数时，您的路线定义中只有此路线

{ 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

我使用了不同的方法，在我的Component

中收听Activated路线

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

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

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

2 个答案: