URL 更改时 Angular4 重新加载组件

Ann*_*aia 2 angular

我没有找到类似问题的公认答案,因此请不要将其标记为重复。我有一个“请求摘要”组件和“搜索”组件。“搜索”组件在“请求摘要”组件中呈现为弹出窗口。我需要单击搜索组件中的匹配结果并被重定向到新的“请求摘要”页面。'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)

}

Kra*_*ken 5

您现在实际上什么都不做,期望获得路线参数,将您的 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)

它不是重新渲染组件本身,而是在路由更改时始终获取新数据,如果您的逻辑将包含在此订阅中。