Question

我正在开展Angular项目。我正在为组件中的刷新操作而苦苦挣扎。

我想在点击按钮时刷新路由器的组件。当我点击它时，我有刷新按钮需要刷新组件/路由器。

我试过window.location.reload()和location.reload()这两个不适合我的需要。如果有人知道，请帮忙。

Answer 1

经过一些研究和修改我的代码如下，该脚本为我工作。我刚刚添加条件：

this.router.navigateByUrl('/RefrshComponent', {skipLocationChange: true}).then(()=>
this.router.navigate(["Your actualComponent"]));

Answer 2

使用 this.ngOnInit（）; 重新加载相同的组件，而不是重新加载整个页面！

DeleteEmployee(id:number)
  {
    this.employeeService.deleteEmployee(id)
    .subscribe( 
      (data) =>{
        console.log(data);

        this.ngOnInit();

      }),
      err => {
        console.log("Error");
      }   
  }

Answer 3

将此代码添加到所需组件构造函数的代码中。

this.router.routeReuseStrategy.shouldReuseRoute = function () {
  return false;
};

this.mySubscription = this.router.events.subscribe((event) => {
  if (event instanceof NavigationEnd) {
    // Trick the Router into believing it's last link wasn't previously loaded
    this.router.navigated = false;
  }
});

请务必unsubscribe中的 mySubscription ngOnDestroy()。

ngOnDestroy() {
  if (this.mySubscription) {
    this.mySubscription.unsubscribe();
  }
}

有关详细信息，请参阅此主题 - https://github.com/angular/angular/issues/13831

Answer 4

幸运的是，如果您使用的是Angular 5.1+，则由于添加了本机支持，因此不再需要实施hack。您只需要在RouterModule选项中将onSameUrlNavigation设置为“重新加载” ：

@ngModule({
 imports: [RouterModule.forRoot(routes, {onSameUrlNavigation: ‘reload’})],
 exports: [RouterModule],
 })

更多信息可以在这里找到：https://medium.com/engineering-on-the-incline/reloading-current-route-on-click-angular-5-1a1bfc740ab2

Answer 5

这有点开箱即用，我不知道这是否对您有帮助，但是您尝试过

具有函数，因此您所拥有的任何代码都会像刷新一样被调出。

Answer 6

这可以通过hack实现，导航到某个示例组件，然后导航到要重新加载的组件。

this.router.navigateByUrl('/SampleComponent', { skipLocationChange: true });
this.router.navigate(["yourLandingComponent"]);

Answer 7

之前的一些答案有问题：

不应直接调用诸如 ngOnInit() 之类的生命周期方法。
重新导航到某个 URL 是次优解决方案，尤其是当您动态加载的组件只是大页面的一小部分时

这对我有用（我不知道它是否值得推荐或最佳）

在要动态加载的组件中，添加对 ChangeDetectorRef 的public 引用。
我假设动态加载的数据有一些输入数据（示例中的“标签”），这些数据在事后更新并造成渲染问题。

  @Input()
  tags: string[] = [];

  constructor(public changeDetector: ChangeDetectorRef )

在执行动态加载的父组件中，在动态创建子组件并可能为其设置一些数据后，调用创建的实例的changeDetector.markForCheck()如下：

  constructor(private vcrf: ViewContainerRef, private cfr: ComponentFactoryResolver, private elementRef: ElementRef) {
  }

  public loadComponent(): void {

    const componentFactory = this.cfr.resolveComponentFactory(TagsListComponent);
    const component = this.container.createComponent(componentFactory);
    component.instance.tags = /* whatever data we want to pass */;
    component.instance.changeDetector.markForCheck();
    ...

loadComponent() 是一个可以调用的自定义函数，例如，一旦父页面滚动到父组件中的某个位置，表示应该显示动态组件。

Answer 8

只需这样做：（对于9号角）

import { Inject } from '@angular/core';    
import { DOCUMENT } from '@angular/common';

constructor(@Inject(DOCUMENT) private document: Document){ }

someMethode(){ this.document.location.reload(); }

Answer 9

只需按照以下步骤操作：

在 app-routing.modules.ts 中添加如下所示的 {onSameUrlNavigation: 'reload'}

<块引用>

@NgModule({
进口：[ RouterModule.forRoot(routes,{onSameUrlNavigation: 'reload'})],
出口：[路由器模块]
})

在组件 ts 文件构造函数中添加 this.router.routeReuseStrategy.shouldReuseRoute = () => false 如下：

<块引用>

constructor(private router: Router) {
      this.router.routeReuseStrategy.shouldReuseRoute = () => false;
  }

现在单击按钮并调用 ajax 服务器调用，从服务器获取所需的数据并将 TS 文件中的全局变量替换为新数据。
最后调用 this.router.navigate([/sameRoute]);。将 sameRoute 替换为您的路线网址。
确保在刷新按钮的 onClick 方法的最后返回 false，否则将导致主路由页面而不是同一页面重新加载。

这些步骤将重新加载您的页面。 :)

欲知更多详情：https://medium.com/engineering-on-the-incline/reloading-current-route-on-click-angular-5-1a1bfc740ab2

我使用的是 Angular 12。

Answer 10

在我的应用程序中，我有组件，并且所有数据均来自我在组件的构造函数中调用的API。我通过按钮可以更新页面数据。在按钮上单击，我将数据保存在后端并刷新数据。因此，按照我的要求，重新加载/刷新组件仅是刷新数据。如果这也是您的要求，请使用在组件的构造函数中编写的相同代码。

Answer 11

另一种没有显式路由的方式：

peaks <- c(2:10)
l <- length(peaks)
result <- l - peaks
result[result > 0]

Answer 12

reload () { this.ngOnInit(); }

Answer 13

router.navigate['/path'] 只会带你到指定的路径
使用 router.navigateByUrl('/path')
它重新加载整个页面

Answer 14

就我而言，我想refresh the whole page而不只是组件，这就是我的做法

window.location.reload();

Answer 15

只需从角度路由器更改routeReuseStrategy：

this._router.routeReuseStrategy.shouldReuseRoute = function () {
      return false;
    };

将“已导航”的路由器属性设置为false：

this._router.navigated = false;

然后导航到您的组件：

this._router.navigate(['routeToYourComponent'])

之后，恢复旧的/默认的routeReuseStrategy：

this._router.routeReuseStrategy.shouldReuseRoute = function (future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
          return future.routeConfig === curr.routeConfig;

您还可以使用以下服务：

@Injectable({
  providedIn: 'root'
})
export class RouterService {

  constructor(
    private _activatedRoute: ActivatedRoute,
    private _router: Router
  ) { }

  reuseRoutes(reuse: boolean) {
    if (!reuse) {
      this._router.routeReuseStrategy.shouldReuseRoute = function () {
        return false;
      };
    }
    if (reuse) {
      this._router.routeReuseStrategy.shouldReuseRoute = function (future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
        return future.routeConfig === curr.routeConfig;
      };
    }
  }

  async refreshPage(url?: string) {
    this._router.routeReuseStrategy.shouldReuseRoute = function () {
      return false;
    };

    this._router.navigated = false;

    url ? await this._router.navigate([url]) : await this._router.navigate([], { relativeTo: this._activatedRoute });

    this._router.routeReuseStrategy.shouldReuseRoute = function (future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
      return future.routeConfig === curr.routeConfig;
    };
  }
}

Answer 16

html文件

<a (click)= "getcoursedetails(obj.Id)" routerLinkActive="active" class="btn btn-danger">Read more...</a>

ts文件

  getcoursedetails(id)
  { 
  this._route.navigateByUrl('/RefreshComponent', { skipLocationChange: true }).then(() => {
    this._route.navigate(["course",id]);
  });

Answer 17

<p>Default table:</p>

<table>
  <tr>
    <td>First cell</td>
    <td>Second cell</td>
  </tr>
</table>

<p>Removed spacing:</p>

<table class="no-spacing" cellspacing="0"> <!-- cellspacing 0 to support IE6 and IE7 -->
  <tr>
    <td>First cell</td>
    <td>Second cell</td>
  </tr>
</table>

Answer 18

kdo

// reload page hack methode

push(uri: string) {
    this.location.replaceState(uri) // force replace and no show change
    await this.router.navigate([uri, { "refresh": (new Date).getTime() }]);
    this.location.replaceState(uri) // replace
  }

Answer 19

以角度2刷新（硬盘）页面的其他方式 看起来像f5

import { Location } from '@angular/common';

constructor(private location: Location) {}

pageRefresh() {
   location.reload();
}

如何刷新Angular中的组件

19 个答案: