在Angular 7中,当从一个组件导航到另一个组件时,可以使用路由导航(router.navigate)来刷新其他组件中的数据。下面是一种常见的方法:
import { Router } from '@angular/router';
import { Component } from '@angular/core';
@Component({
selector: 'app-source-component',
template: `
<button (click)="navigateToDestination()">导航到目标组件</button>
`
})
export class SourceComponent {
constructor(private router: Router) {}
navigateToDestination() {
this.router.navigate(['/destination']);
}
}
import { ActivatedRoute } from '@angular/router';
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-destination-component',
template: `
<h1>目标组件</h1>
<p>{{ data }}</p>
`
})
export class DestinationComponent implements OnInit {
data: string;
constructor(private route: ActivatedRoute) {}
ngOnInit() {
this.route.queryParams.subscribe(params => {
this.data = params['data'];
});
}
}
import { Router } from '@angular/router';
import { Component } from '@angular/core';
@Component({
selector: 'app-source-component',
template: `
<button (click)="navigateToDestination()">导航到目标组件</button>
`
})
export class SourceComponent {
constructor(private router: Router) {}
navigateToDestination() {
const dataToRefresh = '要刷新的数据';
this.router.navigate(['/destination'], { queryParams: { data: dataToRefresh } });
}
}
import { ActivatedRoute } from '@angular/router';
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-destination-component',
template: `
<h1>目标组件</h1>
<p>{{ data }}</p>
`
})
export class DestinationComponent implements OnInit {
data: string;
constructor(private route: ActivatedRoute) {}
ngOnInit() {
this.route.queryParams.subscribe(params => {
this.data = params['data'];
// 在这里可以更新目标组件中的数据
});
}
}
通过上述步骤,当从源组件导航到目标组件时,目标组件可以通过订阅路由参数的变化来更新数据。可以根据实际需求在目标组件中处理这些数据,例如刷新页面、重新请求数据等。
腾讯云相关产品推荐:
领取专属 10元无门槛券
手把手带您无忧上云