entityMap|blocks|key|794k5|text|这可以通过hack实现，导航到一些示例组件，然后导航到您想要重新加载的组件。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2q2ur|this.router.navigateByUrl('/SampleComponent',+{+skipLocationChange:+true+});
this.router.navigate(["yourLandingComponent"]);|code-block|syntax|javascript^0|0^^$0|$]|1|@$2|3|4|5|6|7|8|H|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|I|9|@]|A|@]|B|$F|G]]]]

This can be achieved via a hack, Navigate to some sample component and then navigate to the component that you want to reload. 

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

entityMap|blocks|key|cickc|text|在angular+2中刷新页面的其他方法(硬方法)如下|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1i1jt|7co65|它看起来像f5|f3mi4|import+{+Location+}+from+'@angular/common';

constructor(private+location:+Location)+{}

pageRefresh()+{
+++location.reload();
}|code-block|syntax|javascript^0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|K|9|@]|A|@]|B|$]]|$2|C|4|-4|6|7|8|L|9|@]|A|@]|B|$]]|$2|D|4|E|6|7|8|M|9|@]|A|@]|B|$]]|$2|F|4|G|6|H|8|N|9|@]|A|@]|B|$I|J]]]]

Other way to refresh (hard way) a page in angular 2 like this 
it's look like f5
 

<pre><code>import { Location } from '@angular/common';

constructor(private location: Location) {}

pageRefresh() {
 location.reload();
}
</code></pre>

entityMap|blocks|key|bd6fi|text|经过一些研究和修改我的代码，如下所示，这个脚本对我起作用了。我只是添加了条件：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|7cl0a|this.router.navigateByUrl('/RefreshComponent',+{+skipLocationChange:+true+}).then(()+=>+{
++++this.router.navigate(['Your+actualComponent']);
});|code-block|syntax|javascript^0|0^^$0|$]|1|@$2|3|4|5|6|7|8|H|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|I|9|@]|A|@]|B|$F|G]]]]

After some research and modifying my code as below, the script worked for me. I just added the condition:

<pre><code>this.router.navigateByUrl('/RefreshComponent', { skipLocationChange: true }).then(() =&gt; {
 this.router.navigate(['Your actualComponent']);
}); 
</code></pre>

entityMap|blocks|key|bg9j2|text|将此代码添加到所需组件的构造函数中对我很有效。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|db0a8|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;
++}
});|code-block|syntax|javascript|8b1q9|一定要|8is6o|从这里|dclqk|mySubscription|deoqd|在|80k6d|..。|39h7|ngOnDestroy()+{
++if+(this.mySubscription)+{
++++this.mySubscription.unsubscribe();
++}
}|fsrop|有关更多详细信息，请参阅此帖子-|4a2m9|https://github.com/angular/angular/issues/13831^0|0|0|0|0|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|X|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|Y|9|@]|A|@]|B|$F|G]]|$2|H|4|I|6|7|8|Z|9|@]|A|@]|B|$]]|$2|J|4|K|6|7|8|10|9|@]|A|@]|B|$]]|$2|L|4|M|6|7|8|11|9|@]|A|@]|B|$]]|$2|N|4|O|6|7|8|12|9|@]|A|@]|B|$]]|$2|P|4|Q|6|7|8|13|9|@]|A|@]|B|$]]|$2|R|4|S|6|E|8|14|9|@]|A|@]|B|$F|G]]|$2|T|4|U|6|7|8|15|9|@]|A|@]|B|$]]|$2|V|4|W|6|7|8|16|9|@]|A|@]|B|$]]]]

Adding this to code to the required component's constructor worked for me. 

<pre><code>this.router.routeReuseStrategy.shouldReuseRoute = function () {
 return false;
};

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

Make sure to <code>unsubscribe</code> from this mySubscription in <code>ngOnDestroy()</code>.

<pre><code>ngOnDestroy() {
 if (this.mySubscription) {
 this.mySubscription.unsubscribe();
 }
}
</code></pre>

Refer to this thread for more details - <a href="https://github.com/angular/angular/issues/13831" rel="noreferrer">https://github.com/angular/angular/issues/13831</a>

entityMap|blocks|key|asddi|text|使用|type|unstyled|depth|inlineStyleRanges|entityRanges|data|dhgu8|this.ngOnInit()；|5guf5|重新加载相同的组件，而不是重新加载整个页面！！|7rs45|DeleteEmployee(id:number)
++{
++++this.employeeService.deleteEmployee(id)
++++.subscribe(+
++++++(data)+=>{
++++++++console.log(data);

++++++++this.ngOnInit();

++++++}),
++++++err+=>+{
++++++++console.log("Error");
++++++}+++
++}|code-block|syntax|javascript^0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|L|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|M|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|N|9|@]|A|@]|B|$]]|$2|G|4|H|6|I|8|O|9|@]|A|@]|B|$J|K]]]]

Use the this.ngOnInit(); to reload the same component instead reloading the entire page!!

<pre><code>DeleteEmployee(id:number)
 {
 this.employeeService.deleteEmployee(id)
 .subscribe( 
 (data) =&gt;{
 console.log(data);

 this.ngOnInit();

 }),
 err =&gt; {
 console.log("Error");
 } 
 }
</code></pre>

entityMap|blocks|key|2iooc|text|在我的应用程序中，我有组件，所有数据都来自API，我在组件的构造函数中调用它。有一个按钮，我可以通过它来更新我的页面数据。单击按钮后，我将数据保存在后端并刷新数据。因此，按照我的要求，重新加载/刷新组件只是刷新数据。如果这也是你的需求，那么使用在组件的构造函数中编写的相同代码。|type|unstyled|depth|inlineStyleRanges|entityRanges|data^0^^$0|$]|1|@$2|3|4|5|6|7|8|C|9|@]|A|@]|B|$]]]]

In my application i have component and all data is coming from API which i am calling in Component's constructor.
There is button by which i am updating my page data. on button click i have save data in back end and refresh data.
So to reload/refresh the component - as per my requirement - is only to refresh the data.
if this is also your requirement then use the same code written in constructor of component.

entityMap|blocks|key|43vfs|text|幸运的是，如果您使用的是Angular+5.1%2B，则不再需要实现hack，因为添加了本机支持。你只需要|type|unstyled|depth|inlineStyleRanges|entityRanges|data|evpur|将onSameUrlNavigation设置为“reload”|8s0jk|在RouterModule选项中：|ajlc2|@ngModule({
+imports:+[RouterModule.forRoot(routes,+{onSameUrlNavigation:+‘reload’})],
+exports:+[RouterModule],
+})|code-block|syntax|javascript|7agm8|更多信息可以在这里找到：|1vu2n|https://medium.com/engineering-on-the-incline/reloading-current-route-on-click-angular-5-1a1bfc740ab2^0|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|P|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|Q|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|R|9|@]|A|@]|B|$]]|$2|G|4|H|6|I|8|S|9|@]|A|@]|B|$J|K]]|$2|L|4|M|6|7|8|T|9|@]|A|@]|B|$]]|$2|N|4|O|6|7|8|U|9|@]|A|@]|B|$]]]]

Fortunately, if you are using Angular 5.1+, you do not need to implement a hack anymore as native support has been added. You just need to set onSameUrlNavigation to 'reload' in the RouterModule options :

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

More information can be found here: <a href="https://medium.com/engineering-on-the-incline/reloading-current-route-on-click-angular-5-1a1bfc740ab2" rel="noreferrer">https://medium.com/engineering-on-the-incline/reloading-current-route-on-click-angular-5-1a1bfc740ab2</a>

entityMap|blocks|key|ee7qj|text|kdo|type|unstyled|depth|inlineStyleRanges|entityRanges|data|d7jj0|//+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
++}|code-block|syntax|javascript^0|0^^$0|$]|1|@$2|3|4|5|6|7|8|H|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|I|9|@]|A|@]|B|$F|G]]]]

kdo 

<pre><code>// 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
 }
</code></pre>

entityMap|blocks|key|99gb6|text|constructor(private+router:Router,+private+route:ActivatedRoute+)+{+
}

onReload(){
+this.router.navigate(['/servers'],{relativeTo:this.route})
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript^0^^$0|$]|1|@$2|3|4|5|6|7|8|E|9|@]|A|@]|B|$C|D]]]]

<pre><code>constructor(private router:Router, private route:ActivatedRoute ) { 
}

onReload(){
 this.router.navigate(['/servers'],{relativeTo:this.route})
}
</code></pre>

entityMap|blocks|key|9rpq9|text|另一种没有显式路由的方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5dgho|async+reload(url:+string):+Promise+{
++await+this.router.navigateByUrl('.',+{+skipLocationChange:+true+});
++return+this.router.navigateByUrl(url);
}|code-block|syntax|javascript^0|0^^$0|$]|1|@$2|3|4|5|6|7|8|H|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|I|9|@]|A|@]|B|$F|G]]]]

One more way without explicit route: 

<pre class="lang-js prettyprint-override"><code>async reload(url: string): Promise&lt;boolean&gt; {
 await this.router.navigateByUrl('.', { skipLocationChange: true });
 return this.router.navigateByUrl(url);
}
</code></pre>

entityMap|blocks|key|4sp71|text|只需这样做：(适用于angular+9)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|6a81p|import+{+Inject+}+from+'@angular/core';++++
import+{+DOCUMENT+}+from+'@angular/common';

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

someMethode(){+this.document.location.reload();+}|code-block|syntax|javascript^0|0^^$0|$]|1|@$2|3|4|5|6|7|8|H|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|I|9|@]|A|@]|B|$F|G]]]]

just do this : (for angular 9)

<pre><code>import { Inject } from '@angular/core'; 
import { DOCUMENT } from '@angular/common';

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

someMethode(){ this.document.location.reload(); }
</code></pre>

entityMap|blocks|key|bqhhc|text|这有点开箱即用，我不知道这对你有没有帮助，但你试过了吗？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4kc0t|它是一个函数，所以无论你在其中有什么代码，它都会像刷新一样被调用。^0|0^^$0|$]|1|@$2|3|4|5|6|7|8|E|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|F|9|@]|A|@]|B|$]]]]

this is little bit out of box and I dont know whether this helps you or not but have yo tried
<code>this.ngOnInit();</code>
its a function so whatever code you have in it will be recalled just like a refresh.

entityMap|blocks|key|64n54|text|html文件|type|unstyled|depth|inlineStyleRanges|entityRanges|data|a445b|Read+more...|code-block|syntax|javascript|d79gq|ts文件|dhmdn|getcoursedetails(id)
++{+
++this._route.navigateByUrl('/RefreshComponent',+{+skipLocationChange:+true+}).then(()+=>+{
++++this._route.navigate(["course",id]);
++});^0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|L|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|M|9|@]|A|@]|B|$F|G]]|$2|H|4|I|6|7|8|N|9|@]|A|@]|B|$]]|$2|J|4|K|6|E|8|O|9|@]|A|@]|B|$F|G]]]]

html file
<pre><code>&lt;a (click)= &quot;getcoursedetails(obj.Id)&quot; routerLinkActive=&quot;active&quot; class=&quot;btn btn-danger&quot;&gt;Read more...&lt;/a&gt;
</code></pre>
ts file
<pre><code> getcoursedetails(id)
 { 
 this._route.navigateByUrl('/RefreshComponent', { skipLocationChange: true }).then(() =&gt; {
 this._route.navigate([&quot;course&quot;,id]);
 }); 
</code></pre>

entityMap|blocks|key|f6djt|text|将只将您带到指定的路径。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|54ubo|使用|3jnka|它会重新加载整个页面^0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|G|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|H|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|I|9|@]|A|@]|B|$]]]]

<code>router.navigate['/path']</code> will only takes you to the specified path 
use <code>router.navigateByUrl('/path')</code> 
it reloads the whole page

I am working on an Angular project. I'm struggling with refresh action in a component. 
I would like to refresh the router's components on button click.
I have refresh button when I click on it the component/router need to be refresh. 
I tried <code>window.location.reload()</code> and <code>location.reload()</code> these two are not suitable for my need. Please help if anyone aware of it.

How to Refresh a Component in Angular

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

 我正在做一个Angular项目。我正在努力处理组件中的刷新操作。 我想在单击按钮时刷新路由器的组件。我有刷新按钮，当我点击它时，组件/路由器需要刷新。 我试过了 和 这两个不适合我的需要。如果有人知道这一点，请帮助我。

问如何刷新Angular中的组件
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何刷新Angular中的组件EN