[英]Angular 5 how to switch from server side rendering to client side rendering when the app is loaded
I'm using Angular + ASP.NET core. 我正在使用Angular + ASP.NET核心。 By default, it incorporates the server-sider rendering.
默认情况下,它包含服务器端渲染。 It's reasonable because the loading takes time.
这是合理的,因为加载需要时间。 Before the app is bootstrapped correctly, a server-rendering page is really necessary.
在正确引导应用程序之前,确实需要一个服务器渲染页面。
However, I find when I click any anchor link, , instead of routing from the client side, the whole document is refreshed. 但是,当我单击任何锚定链接时,会发现刷新了整个文档,而不是从客户端进行路由。 It's too heavy.
太重了
I'm wondering when the app is already bootstrapped, how could I disable the server-side rendering and use the client-side rendering only? 我想知道应用程序何时已启动,如何禁用服务器端渲染并仅使用客户端渲染?
It's the wrong question. 这是错误的问题。 The reason causing the whole document reloading is not due to server-side rendering, but due to using href on the anchor element.
导致重新加载整个文档的原因不是由于服务器端渲染,而是由于在anchor元素上使用了href。 Instead, I should use routerLink.
相反,我应该使用routerLink。
You have a couple of options here. 您在这里有几个选择。
Option 1 选项1
<a href="javascript:void(0)" (click)="functionContainingRoutingLogic()">My Link</a>
Note that the href
is set to javascript:void(0)
and the routing logic will be written in the Typescript in the function functionContainingRoutingLogic()
. 请注意,
href
设置为javascript:void(0)
,并且路由逻辑将写入函数functionContainingRoutingLogic()
的Typescript中。 Something like this: 像这样:
public functionContainingRoutingLogic() {
this.router.navigate(['route_name_defined_in_your_router_config']);
}
Option 2 选项2
<a href="javascript:void(0)"
[routerLink]="['/route_name_defined_in_your_router_config/']">My link</a>
So, here you are providing the route name directly in the html 因此,您在此处直接在html中提供路由名称
Note: if you have href="#"
or href="anything else"
, clicking on it will reload the same page 注意:如果您具有
href="#"
或href="anything else"
,则单击该页面将重新加载同一页面
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.