我正在使用 Angular 7,更改 URL 参数不会更新内容,因为它不会重新加载构造函数或 ngOnInit,所有 URL 都调用相同的组件,例如 CategoryComponent,但取决于 URL 参数,它会显示一些产品或其他产品。
我用代码更好地解释它。
路由器组件。
const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: ':category', component: CategoryComponent },
{ path: '**', component: Error404Component }
];
我有一个带有下拉菜单的菜单
<div class="dropdown-menu" aria-labelledby="dropdownMenuCategory">
<a class="dropdown-item" [routerLink]="['/robots-aspiradores']">Robots Aspiradores</a>
<a class="dropdown-item" [routerLink]="['/patinetes-electricos']">Patinetes Eléctricos</a>
<a class="dropdown-item" [routerLink]="['/cafeteras']">Cafeteras</a>
</div>
CategoryComponent 构造函数
constructor( private _activatedRoute: ActivatedRoute, private _productService: ProductService ) {
this.url = GLOBAL.url;
this.categoryName = this._activatedRoute.snapshot.paramMap.get("category")
this.getProductsCategory(this.categoryName);
this.title = this.categoryName.replace('-', ' ').toUpperCase();
}
我希望当单击每个菜单选项时我重新加载构造函数或 ngOnInit 但它只在我第一次进入时加载但是如果我从一个类别页面移动到另一个类别页面它不会重新加载我必须去 HOME 并进入另一个类别重新加载。
我不知道我是否解释得很好,我希望如此,问候和感谢。
首先要了解Angular组件的生命周期,所以这里有一篇文章详细讲解。
这里我将重点关注重要的一点:Angular 不会破坏一个组件以在同一个地方创建一个相同类型的组件,只是当 URL 发生变化时,会执行更改检测循环。
所以我们有一个加载了 URL 的组件,
"/:category"
它:category
是一个可变参数。由于组件的构造函数仅在创建实例时执行,并且您的构造函数如下所示:事实证明,您只查看了一次路径(获取当前路径、快照,并采取相应措施(加载相应的类别)。
但是当参数变化时,您的组件不知道它,因为它没有观察(不订阅)参数变化。他看了一遍就忘记了
因此,我建议您进行以下更改:
这样,组件将检测到 URL 中的任何更改,并将作为第一次。