首页 文章

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

提问于
浏览 次
5

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

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>



<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]);
}
angular angular2-routing

2 回答

  • 3

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

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

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

    If you only load /tiles to make a service call and then route to tiles/:master/:filters, but /tiles component doesn't make sense without receiving this data, you could consider using a resolver to make the API call, and then having only tiles/:master/:filters route.

    从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
    } 
}

    这样，它将在加载组件之前检索所需的数据 .

    If your /tiles route component makes sense as a standalone component without master and filters data:

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

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

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

    回复于
  • -1

    我使用了一种不同的方法，在我的Component中监听Activated路由

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

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

相关问题