Question

如何在Angular 2中重新加载相同的组件？

以下是我的代码：

nextproduct()

uidproduct绑定到模板中的click事件。

{{uidproduct.classname}}是一个JSON对象，它有许多属性，我用<div id="selected-product" class="{{uidproduct.classname}}">更新DOM

我在模板中使用这个：

<button (click)="nextproduct()">

单击for (int i = 0; i < commands; i++) { place = commandStarts[i]; if((pid = fork()) < 0) exit(1); else if (pid == 0) { if(i < pipe_counter && dup2(fds[j + 1], 1) < 0) exit(1);// If this is not the last remaining command if(j != 0 && dup2(fds[j-2], 0) < 0) exit(1); // If this is not the first command for(int c = 0; c < 2*pipe_counter; c++) close(fds[c]); if(execvp(argv[place], argv+place)) exit(0); // Execute and if it returns anything, exit! } j+=2; } for(int i = 0; i < 2 * pipe_counter; i++) close(fds[i]); while ((wait(&status)) != pid); // The only program that gets to this point is the // parent process, which should wait for completion时，它将更改DOM中的类属性，但我需要重新加载组件以使外部脚本生效。

Answer 1

您可以使用*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;
  }
}

Answer 2

我不明白为什么需要重新加载组件。如果您绑定到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调用将在每次重新加载时执行。因此，作为对读者的练习，将其从构造函数中取出并为其创建一个很好的服务，或者将其移动到应用程序组件的构造函数，或者移动到您的路由模块或任何对您有意义的地方。

如何重新加载当前的Angular 2组件

2 个答案: