在Angular 7中重新加载子级次要路由的一种解决方法是使用Router
服务的navigate
方法来重新导航到当前路由。
假设你的子级次要路由定义如下:
const routes: Routes = [
{
path: 'parent',
component: ParentComponent,
children: [
{
path: 'child',
component: ChildComponent
}
]
}
];
在ChildComponent
中,你可以注入Router
服务并在需要重新加载子级次要路由的地方调用navigate
方法:
import { Router } from '@angular/router';
@Component({
selector: 'app-child',
templateUrl: './child.component.html',
styleUrls: ['./child.component.css']
})
export class ChildComponent {
constructor(private router: Router) { }
reloadChildRoute() {
this.router.navigate(['./'], { relativeTo: this.route });
}
}
在上面的示例中,reloadChildRoute
方法使用navigate
方法重新导航到当前路由。['./']
表示相对于当前路由的相对路径。
确保在父级组件的模板中将ChildComponent
添加为子级次要路由的出口:
这样,当在ChildComponent
中调用reloadChildRoute
方法时,子级次要路由将被重新加载。