如何重载当前的Angular 2组件
How to reload the current Angular 2 Component
如何在Angular 2中重新加载相同的组件?
下面是我的代码:import { Component, OnInit, ElementRef, Renderer } from '@angular/core';
import { Router, ActivatedRoute, Params } from '@angular/router';
import { productModel } from '../_models/index';
import { categoryListService } from '../_services/index';
@Component({
selector: 'app-product',
templateUrl: 'product.component.html',
styleUrls: ['product.component.css']
})
export class productComponent implements OnInit {
uidproduct: productModel;
param: number;
constructor(
private elementRef: ElementRef,
private route: ActivatedRoute,
private router: Router,
private categoryListService: categoryListService) { }
ngOnInit() {
this.route.params.subscribe(product => {
console.log('logging sub product obj', product);
});
this.uidproduct = JSON.parse(sessionStorage.getItem('product'));
var s = document.createElement("script");
s.type = "text/javascript";
s.src = "http://this/external/script/needs/to/be/loaded/each/time.js";
this.elementRef.nativeElement.appendChild(s);
}
nextproduct(){
let i = this.uidproduct.order;
this.categoryListService.findNextproduct(this.uidproduct);
this.param = ++i;
this.router.navigate([`/product/${this.param}`]);
}
}
nextproduct()
与模板中的单击事件绑定。
uidproduct
是一个JSON对象,有许多属性,我正在更新的DOM与{{uidproduct.classname}}
我在模板中像这样使用它:
<div id="selected-product" class="{{uidproduct.classname}}">
当我点击<button (click)="nextproduct()">
时,它将改变DOM中的类属性,但我需要重新加载组件以使外部脚本生效。
您可以使用*ngIf
来重新呈现模板的内容:
@Component({
selector: '...',
template: `
<ng-container *ngIf="!rerender">
template content here
</ng-container>`
})
export class MyComponent {
rerender = false;
constructor(private cdRef:ChangeDetectorRef){}
doRerender() {
this.rerender = true;
this.cdRef.detectChanges();
this.rerender = false;
}
}
我不明白为什么你需要重新加载组件。如果绑定到uidproduct
的各个字段,那么重新加载应该会刷新组件中显示的值。所以,重新加载组件只会增加开销。
如果你认为你仍然需要这样做的原因在这里没有提到,那么你应该这样做:
- 导航到另一个(可能是空白的)组件。
- 直接返回。
问题是你需要等待第一个导航完成后再进行第二个导航。
在组件中导入NavigationEnd:
import { Router, NavigationEnd } from '@angular/router';
然后在构造函数中订阅它:
constructor(private thingService: ThisThingService, private router: Router) {
router.events.subscribe(event => {
if (event instanceof NavigationEnd) {
if (event.url === '/blank') {
this.router.navigate(['product']);
}
}
});
请注意,我等待NavigationEnd
发生,然后检查是否路由到空白组件。如果是空白组件的路径,则导航回产品。如果你真的需要传递那个ID,只需将它存储在你的对象中并添加到这里。
与其在nextproduct()
中路由到你的产品页面,不如导航到blank
。
this.router.navigate(['blank']);
这样就可以很好地重新加载组件了。
为了简单起见,我故意留下的问题是构造函数中的subscribe
调用将在每次重新加载时执行。因此,作为对读者的一个练习,把它从构造函数中取出来,为它创建一个漂亮的服务,或者把它移到你的应用组件的构造函数中,或者移到你的路由模块中,或者任何你认为有意义的地方。
相关文章:
- Typescript编译器错误,Angular 1.5组件应为分号
- 向Angular 2组件发出传递值
- Angular 1.5组件中的Angular Bootstrap Modal$uibModalInstance未知提供程
- 是否可以将服务注入Angular 1.5组件's templateUrl属性
- 如何使用Angular 1.5组件将属性求值为字符串,这是一个自定义函数
- Angular 2组件测试错误:无法解析'TestComponentBuilder'
- Angular 1.5组件双向绑定不起作用
- <对象>中的 SVG 不会显示在 IE 的 Angular 2 组件中
- 如何在回调函数的 Angular 1.5 组件中处理这个问题
- 如何在 Angular 1.5 组件中等待绑定(没有 $scope.$watch)
- Angular 1.5 组件 onChanges 不起作用
- 没有视图的 Angular 2 组件
- 如何在纯ES5(Javascript)中向angular组件注入自定义服务
- mdSidenav服务可以'当一个组件's在Angular组件内部
- Angular 1.5组件方法templateUrl+函数
- 我可以使用AngularJS's$q在Angular组件之外
- Angular组件构造函数被调用两次
- angular组件中的模板没有按预期工作
- Angular指令到Angular 1.5组件
- 从Angular 2组件中调用纯javascript函数