我没有找到类似问题的公认答案,因此请不要将其标记为重复。我有一个“请求摘要”组件和“搜索”组件。“搜索”组件在“请求摘要”组件中呈现为弹出窗口。我需要单击搜索组件中的匹配结果并被重定向到新的“请求摘要”页面。'request-summary' 订阅了 URL 更改并成功查看它们,但不会重新加载自身。如何实现?
@Component({
selector: 'request-summary',
templateUrl: './request-summary.html',
styleUrls: ['./request-summary.css'],
encapsulation: ViewEncapsulation.None
})
export class RequestSummaryComponent {
private subscription: Subscription;
private requestId:number;
constructor(private documentService: DocumentService,private router:
Router,private activatedRoute: ActivatedRoute,private requestDist:
RequestDistService,private eRef: ElementRef){
}
ngOnInit() {
this.activatedRoute.params.subscribe(params => {
this.requestId = params['requestId']
console.log("URL id has changed")
});
this.getRequestInfo(); //some logic for rendering selected request
info
}
Run Code Online (Sandbox Code Playgroud)
搜索组件:
@Component({
selector: 'search',
templateUrl: './search.html',
styleUrls: ['./search.css'],
})
export class SearchComponent {
public userInput = '';
private data = []
constructor(private requestDist : RequestDistService, private router:
Router) { }
openSelectedGroup(id){ //click event
this.router.navigate(['./../requestSummary/'+id]);
}
Run Code Online (Sandbox Code Playgroud)
}
您现在实际上什么都不做,期望获得路线参数,将您的 ngOnInit 更改为此,它会起作用
ngOnInit() {
this.activatedRoute.params.subscribe(params => {
this.requestId = params['requestId']
console.log("URL id has changed")
this.getRequestInfo();
});
}
Run Code Online (Sandbox Code Playgroud)
它不是重新渲染组件本身,而是在路由更改时始终获取新数据,如果您的逻辑将包含在此订阅中。
| 归档时间: |
|
| 查看次数: |
3618 次 |
| 最近记录: |