blocks|key|537809|text|每当路由发生时，都会创建组件并调用ngOnInit函数。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|537810|export+class+TestComponent+implements+OnInit{
++constructor(){
+++++//called+first+time+before+the+ngOnInit()
++}

++ngOnInit(){
+++++//called+after+the+constructor
++}
}|code-block|syntax|javascript|537811|我们还有两种选择-|537812|Resover+-+resolve函数|ordered-list-item|537813|Gaurds+-+canActive函数|537814|每当路由更改时，Resolver和Gaurd都会被执行。|537815|entityMap^0|H|8|0|0|0|0|7|A|7|0|0|6|9|9|0|8|8|H|5|0^^$0|@$1|2|3|4|5|6|7|V|8|@$9|W|A|X|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|Y|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|Z|8|@]|D|@]|E|$]]|$1|M|3|N|5|O|7|10|8|@$9|11|A|12|B|C]|$9|13|A|14|B|C]]|D|@]|E|$]]|$1|P|3|Q|5|O|7|15|8|@$9|16|A|17|B|C]|$9|18|A|19|B|C]]|D|@]|E|$]]|$1|R|3|S|5|6|7|1A|8|@$9|1B|A|1C|B|C]|$9|1D|A|1E|B|C]]|D|@]|E|$]]|$1|T|3|-4|5|6|7|1F|8|@]|D|@]|E|$]]]|U|$]]

Whenever routing happens Component get created and <code>ngOnInit</code> function is called. 

<pre><code>export class TestComponent implements OnInit{
 constructor(){
 //called first time before the ngOnInit()
 }

 ngOnInit(){
 //called after the constructor
 }
}
</code></pre>

Other two options that we have are - 

<ol>
<li><code>Resover</code> - <code>resolve</code> function</li>
<li><code>Gaurds</code> - <code>canActive</code> function</li>
</ol>

<code>Resolver</code> and <code>Gaurd</code> get executed whenever routing is changing.

blocks|key|2293365|text|您可以订阅路由器的事件，这将在每次路由更改时触发一个事件。然后您可以获得该事件的活动路由，并检查当前所在组件的路由是否等于该路由。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2293366|提示:使用instanceof+NavigationEnd对事件进行筛选|style|CODE|2293367|entityMap|0|LINK|mutability|MUTABLE|url|https://angular.io/api/router|1|https://angular.io/api/router/Event^0|5|3|0|9|2|1|0|5|O|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@$A|S|B|T|1|U]|$A|V|B|W|1|X]]|C|$]]|$1|D|3|E|5|6|7|Y|8|@$A|Z|B|10|F|G]]|9|@]|C|$]]|$1|H|3|-4|5|6|7|11|8|@]|9|@]|C|$]]]|I|$J|$5|K|L|M|C|$N|O]]|P|$5|K|L|M|C|$N|Q]]]]

You can subscribe to the <a href="https://angular.io/api/router" rel="nofollow noreferrer">router</a>'s <a href="https://angular.io/api/router/Event" rel="nofollow noreferrer">events</a>, this will fire off an event each time your route changes. You can then get the active route of off this event and check if the route of the component you're currently in is equal to that route.

TIP: Filter on the events by using <code>instanceof NavigationEnd</code>

blocks|key|1450867|text|您基本上可以将注入Router作为依赖项添加，然后在其上订阅events。有一个路由器公开的事件列表。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1450868|因为我们只关心NavigationEnd事件，所以可以使用filter操作符过滤掉它。|1450869|事件数据具有url属性，可用于与NavigationEnd之后获得的路径进行比较。|1450870|this.router.events
.pipe(
++filter(event+=>+event+instanceof+NavigationEnd)
)
.subscribe((event:+any)+=>+{
++console.log('Got+the+Event+URL+as+'.+event.url);
})|code-block|syntax|javascript|1450871|这是一个供您参考的样本StackBlitz。|1450872|entityMap|0|LINK|mutability|MUTABLE|url|https://angular.io/api/router/Event|1|https://stackblitz.com/edit/angular-uri-encode-activated-route-param?file=src%252Fapp%252Fproject%252Fproject.component.ts^0|9|6|U|6|1A|2|0|0|7|D|T|6|0|6|3|G|D|0|0|9|C|1|0^^$0|@$1|2|3|4|5|6|7|10|8|@$9|11|A|12|B|C]|$9|13|A|14|B|C]]|D|@$9|15|A|16|1|17]]|E|$]]|$1|F|3|G|5|6|7|18|8|@$9|19|A|1A|B|C]|$9|1B|A|1C|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|1D|8|@$9|1E|A|1F|B|C]|$9|1G|A|1H|B|C]]|D|@]|E|$]]|$1|J|3|K|5|L|7|1I|8|@]|D|@]|E|$M|N]]|$1|O|3|P|5|6|7|1J|8|@]|D|@$9|1K|A|1L|1|1M]]|E|$]]|$1|Q|3|-4|5|6|7|1N|8|@]|D|@]|E|$]]]|R|$S|$5|T|U|V|E|$W|X]]|Y|$5|T|U|V|E|$W|Z]]]]

You can basically add inject <code>Router</code> as a dependency and then subscribe to <code>events</code> on it. There is a list of <a href="https://angular.io/api/router/Event" rel="nofollow noreferrer"><code>events</code></a> that Router exposes.

Since we only care about the <code>NavigationEnd</code> event, you can filter that out using the <code>filter</code> operator.

The event data has a <code>url</code> property that can be used to compare with the path that was attained after <code>NavigationEnd</code>

<pre><code>this.router.events
.pipe(
 filter(event =&gt; event instanceof NavigationEnd)
)
.subscribe((event: any) =&gt; {
 console.log('Got the Event URL as '. event.url);
})
</code></pre>

Here's a <a href="https://stackblitz.com/edit/angular-uri-encode-activated-route-param?file=src%2Fapp%2Fproject%2Fproject.component.ts" rel="nofollow noreferrer">Sample StackBlitz</a> for your ref.

I have a routing strategy that does not destroy the component when routing to another component. I would like to call a method of the component, when (re)routing to it.

Until now I've tried implementing the interfaces <code>AfterContentChecked</code> and <code>AfteViewChecked</code> with their respective methods <code>ngAfterContentChecked</code> and `ngAfterViewChecked. The only problem with implementing one of this interfaces is that the method is called multiple times when routing to the component and this is a performance problem for me. 

While researching the web I haven't come across an interface which I could implement in order to obtain the desired behaviour.

Is the only possibility for solving this, verifying in the router which route/path was selected and in the case of the desired one, I call the method of the component?

angular 4 call component method when re-routing to it

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

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

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

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

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

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

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

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

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

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

我有一个路由策略，它在路由到另一个组件时不会破坏组件。当(重新)路由到组件时，我想调用组件的一个方法。到目前为止，我已经尝试用各自的方法AfterContentChecked和AfteViewChecked实现接口ngAfterContentChecked和‘`ngAfterViewChecked。实现其中一个接口的唯...

问重路由时的角4调用分量法
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问重路由时的角4调用分量法EN