매개 변수가있는 앵귤러 경로 2 개가 onInit 구성 요소를 다시 초기화합니다.

Question

새 매개 변수로 경로를 지정할 때 구성 요소가 다시 초기화되는 문제가 있습니다. 여기 내 경로입니다.

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

"타일"에 연결하고 일부 데이터를 가져 오기 위해 서비스 호출을 수행합니다. 그런 다음 "마스터"및 "필터"값을 사용하여 같은 구성 요소로 다시 라우팅하는 두 개의 단추가 있습니다. 매개 변수를 사용하여 구성 요소로 다시 라우팅하면 구성 요소가 다시 초기화되고 서비스 호출이 반복됩니다. 또한 페이지에 텍스트 입력이 있습니다. 이 구성 요소를 처음으로 라우팅하고 텍스트를 추가하면 매개 변수가있는 경로가 해당 텍스트를 삭제합니다.

<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/:master/:filters에 다음 서비스 요청 및 경로를 만들 경우 만 :

나는 특정 시나리오에 따라, 여기에 다른 가능성을 볼 데이터의 경우 API를 호출하기 위해 확인 프로그램을 사용하고 tiles/:master/:filters 경로 만 사용하는 것이 좋습니다. official docs에서

, 당신은 리졸버 내부의 서비스 호출을 수행 할 수 있습니다

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

이 방법, 그것은을 검색합니다 :로

이

@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', component: DisplayTileData } 

에서만이 경로를 그리고 router.navigate('/tiles', {master: '', filter: ''}을 통해이 경로로 이동합니다.

constructor(private route: ActivatedRoute) {} 

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

this.route.params가 PARAMS의 관측이다, 그래서 당신은 비동기 작업을 할 수있는 변화에 반응 할 수있다 :이 경우

, 당신의 구성 요소는 뭔가를해야합니다.