如何在角度刷新组件

我工作在一个角度的项目。我挣扎在一个组件刷新行动。

我想刷新路由器的组件按钮点击。 我有刷新按钮，当我点击它的组件/路由器需要刷新。 < br > < br > 我尝试了 window.location.reload()和 location.reload()这两个不适合我的需要。请帮助，如果有人知道它。

587646 次浏览
小开

这可以通过黑客技术实现，导航到一些示例组件，然后导航到您想要重新加载的组件。

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

另一种方式刷新(硬的方式)在角度2像这样的网页 看起来像 F5 

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


constructor(private location: Location) {}


pageRefresh() {
location.reload();
}
小开
最佳答案

经过一些研究和修改我的代码如下，这个脚本对我很有用，我只是添加了一个条件:

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

将此添加到所需组件的构造函数的代码中对我来说很有用。

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;
}
});

确保在 ngOnDestroy()中从这个 我的订阅转到 unsubscribe。

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

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

小开

使用 This. ngOnInit () ;重新加载相同的组件，而不是重新加载整个页面! ！

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


this.ngOnInit();


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

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

小开

幸运的是，如果你正在使用 Angular 5.1 + ，你不需要再实现一个黑客，因为本地支持已经被添加。您只需在 RouterModule 选项中输入 设置为‘ reload’:

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

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

小开

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
}
小开 
constructor(private router:Router, private route:ActivatedRoute ) {
}


onReload(){
this.router.navigate(['/servers'],{relativeTo:this.route})
}
小开

还有一种没有明确路线的方法:

async reload(url: string): Promise<boolean> {
await this.router.navigateByUrl('.', { skipLocationChange: true });
return this.router.navigateByUrl(url);
}
小开

就这样做: (对于角9)

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


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


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

这是一个小的盒子外，我不知道这是否帮助你或没有，但你尝试过

this.ngOnInit();

它是一个函数，所以不管你在里面写了什么代码，它都会像刷新一样被回忆起来。

小开

Html 文件

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

文件

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

只要把 routeReuseStrategy从有角度的路由器上调下来:

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

将 routerproperty“导航”设置为 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;
};
}
}
小开

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

小开

reload () { this.ngOnInit(); }

小开

以前的一些答案存在一些问题:

  1. 不应该直接调用诸如 NgOnInit ()之类的生命周期方法。
  2. 重新导航到某些 URL 是次优的解决方案，特别是当您正在动态加载的组件只是大页面的一小部分时

这对我很有效(我不知道这是否值得推荐或最佳)

  1. 在要动态加载的组件中，向 ChangeDetectorRef添加一个 公众人士引用。
  2. 我假设动态加载的数据具有一些输入数据(示例中的“ 标签”) ，这些数据会在事后更新，并且会产生呈现问题。
  @Input()
tags: string[] = [];


constructor(public changeDetector: ChangeDetectorRef )
  1. 在进行动态加载的父组件中，在动态创建子组件并可能为其设置一些数据之后，调用创建的实例的 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 () 是一个自定义函数，例如，一旦父页滚动到父组件中的某个位置，就可以调用该函数，这表明应该显示动态组件。

小开

只需按照以下步骤:

  1. 将 {onSameUrlNavigation: 'reload'}添加到 app-outing.modules.ts 中，如下所示

@ NgModule ({
Import: [ RouterModule.forRoot (路由，{ onSameUrlNavigation: ‘ reload’})] ,
输出: [ RouterModule ]
})

  1. 在组件 ts 文件构造函数中添加如下 this.router.routeReuseStrategy.shouldReuseRoute = () => false:
constructor(private router: Router) {
this.router.routeReuseStrategy.shouldReuseRoute = () => false;
}
  1. 现在单击按钮并调用 ajax 服务器调用，从服务器获取所需的数据，并用新数据替换 TS 文件中的全局变量。
  2. 最后调用 this.router.navigate([/sameRoute]);。 用你的路由网址替换相同的路由。

  3. 请确保在刷新按钮的 onClick 方法的末尾返回 false，否则将导致主路由页面而不是同一页面重新加载。

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

详情请浏览: https://medium.com/engineering-on-the-incline/reloading-current-route-on-click-angular-5-1a1bfc740ab2

我用的是角度12。

小开

在我的情况下，我需要重新加载特定的路由(不是所有的应用程序) ，所以添加全局设置 {onSameUrlNavigation: 'reload'}没有效果，而 this.router.routeReuseStrategy.shouldReuseRoute = () => false在组件工作，但修改路由器的全局设置。

解决方案是将原始的路由器配置保存为一个变量，然后在组件的构造函数中修改它，如问题的第一个答案所示@abhishek-singh。

private routeReuseStrategy:any;


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

退出路径时，使用 OnDestroy 挂钩重新映射原始配置。

   public ngOnDestroy():void
{
this.router.routeReuseStrategy.shouldReuseRoute = this.routeReuseStrategy;
}

小开

调用 ngOnInit()对我的复杂组件不起作用，我最终使用了这个

reloadCurrentRoute() {
let currentUrl = this.router.url;
this.router.navigateByUrl('/', {skipLocationChange: true}).then(() => {
this.router.navigate([currentUrl]);
});
}
小开

这对我来说很有用: This. ngOnInit () ;


提交答案