잘 구성하기 위해 경로 데이터에 액세스해야 하는 파이프가 있습니다.
export class LevelPercentagePipe implements PipeTransform {
levelDictionnary: LevelDictionnary;
constructor(private route: ActivatedRoute) {
this.levelDictionnary = new LevelDictionnary(this.route.snapshot.data['prerequisiteLists']);
}
}
이 데이터는 라우팅 모듈에서 해결됩니다.
{
path: 'xxx',
loadChildren: './xxx/xxx.module#XxxModule',
resolve: {
prerequisiteLists: PrerequisiteResolver
}
}
파이프가 html 템플릿에서 사용되는 경우 내 응용 프로그램의 다른 위치에서 작동합니다. 그러나 이 특별한 경우에는 내 component.ts파일 에서 이 파이프를 사용해야 합니다. 그래서 특정 기능 모듈에서 제공했습니다.
@NgModule({
declarations: [...],
imports: [...],
providers: [LevelFilterPipe],
})
그러나 이제 내 구성 요소 생성자에 삽입될 때 ActivatedRoute.
constructor(
private profileService: ProfileService,
private nameFilterPipe: NameFilterPipe,
private levelFilterPipe: LevelFilterPipe
) {}
작동하지 않습니다.
따라서 대신 수동으로 파이프를 구성해야 합니다.
constructor(
private profileService: ProfileService,
private route: ActivatedRoute,
private scorePipe: ScorePipe,
private nameFilterPipe: NameFilterPipe
) {
// We have to inject route data and scorePipe manually because it's not injected automatically.
this.levelFilterPipe = new LevelFilterPipe(this.route, this.scorePipe);
}
ActivatedRoute자동으로 데이터를 주입하는 다른 방법이 있습니까?
pipe구성 요소의 공급자 목록에 를 추가해야 합니다. 이제 파이프 주입은 업데이트된 ActivatedRoute데이터로 파이프의 새 인스턴스를 생성합니다 .
@Component({
selector: '...',
template: `...`:
providers: [ YourPipeName ]
})
다음은 귀하의 질문에 대한 작동 중인 StackBlitz 프로젝트 예입니다. 파일을 살펴보십시오. hello.component.ts이 구성 요소는 언급한 것처럼 매개 변수로 라우팅됩니다. 이 구성 요소에서 제공된 파이프를 제거하여 문제를 재현하십시오.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다