Question

如何在routerConfig中传递routeparams而不重新加载页面

我有一个组件在routerlink中传递routerparams如下

@Component({
    selector: 'apartment',
  template: `
   <div *ngFor="#apartment of apartments" class="demo-updates mdl-card mdl-shadow--2dp mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet mdl-cell--12-col-desktop">
              <div class="mdl-card__actions mdl-card--border">                
                <a [routerLink]="['AptDetails', {UnitType: apartment.UnitType, aptStatus: 'Available'}]" class="mdl-button mdl-js-button mdl-js-ripple-effect" (click)="getAvailable(apartment)">Available</a>                            
              </div>
    </div>

在接收组件中，参数读取如下，

@Component({
    selector: 'aptdetails',
  template: ` <h1> Apt Details</h1>
              {{aptDetails | json}} 
    `,
    directives: [ROUTER_DIRECTIVES]
})

export class AptDetailsComponent implements OnInit {

    constructor(private apartmentService: ApartmentService, private sharedService: SharedService, params: RouteParams) {
    this.apartmentService = apartmentService;
    this.aptStatus = params.get('aptStatus');
    this.UnitType = params.get('UnitType');    
    }

值成功传递，但刷新页面。

如何在不刷新routerLink页面的情况下传递参数？

我知道我们可以创建一个共享服务来临时存储组件之间的值，我如何使用routeparams？

Answer 1

您可以实施CanReuse

ScrollIntoView

然后只更改参数导航到当前路径会重复使用现有的组件实例。

Answer 2

使用CanReuse和OnReuse，作为

export class Component implements  OnReuse, CanReuse {

    routerCanReuse() {
        if (yourCondition)
            return true;
        else
            return false;
    }

    routerOnReuse() {
        console.log('on reuse');
    }


}

Angular 2 - 如何在routerConfig中传递routeparams而不重新加载页面

2 个答案: