要向命名的router-outlet添加/加载组件,而不更改浏览器URL,你可以使用Angular的Router API中的navigateByUrl方法和skipLocationChange选项。
首先,在组件中引入Router和ActivatedRoute:
import { Router, ActivatedRoute } from '@angular/router';
然后,在组件的构造函数中注入Router和ActivatedRoute:
constructor(private router: Router, private route: ActivatedRoute) { }
接下来,你可以通过以下方式向命名的router-outlet添加/加载组件:
loadComponent() {
this.router.navigateByUrl('/your-component', { skipLocationChange: true });
}
在上面的代码中,'/your-component'是你要加载的组件的路由路径。通过设置skipLocationChange选项为true,可以防止浏览器URL更改。
最后,在模板中添加一个按钮或其他触发器来调用loadComponent方法:
这样,当用户点击该按钮时,组件将被加载到命名的router-outlet中,而不会更改浏览器URL。