blocks|key|3799203|text|当您破坏组件时，您必须取消订阅。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3799204|首先你必须|3799205|import+{+OnDestroy+}+from+'@angular/core;'|code-block|syntax|javascript|3799206|那你就得|3799207|export+class+myClass+implements+OnInit,+OnDestroy+{
++++myObserver+=+null;
++++//+Rest+of+your+code
}|3799208|在你的ngOnInit里，你必须|3799209|ngOnInit()+{
++++this.myObserver+=+this.router.events.subscribe(...);
}|3799210|然后，创建一个函数|3799211|ngOnDestroy()+{
++++this.myObserver.unsubscribe();
}|3799212|entityMap^0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|X|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Y|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|Z|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|11|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|12|8|@]|9|@]|A|$G|H]]|$1|Q|3|R|5|6|7|13|8|@]|9|@]|A|$]]|$1|S|3|T|5|F|7|14|8|@]|9|@]|A|$G|H]]|$1|U|3|-4|5|6|7|15|8|@]|9|@]|A|$]]]|V|$]]

You have to unsubscribe when you destroy your component. 

First you have to 

<pre><code>import { OnDestroy } from '@angular/core;'
</code></pre>

Then you have to 

<pre><code>export class myClass implements OnInit, OnDestroy {
 myObserver = null;
 // Rest of your code
}
</code></pre>

In your ngOnInit, you have to 

<pre><code>ngOnInit() {
 this.myObserver = this.router.events.subscribe(...);
}
</code></pre>

Then, create a function 

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

blocks|key|3388476|text|从日志中可以看到，在每次更改路由时，您的订阅都会被调用三次。因此，这意味着可以观察到的事件会发出许多信号，但你只对其中一个感兴趣。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3388477|+ngOnInit()+{
++++++++this.getData();
++++++++this.router.events.filter(event+=>+event+instanceof+NavigationEnd).subscribe(event+=>++this.getData());++++
++}
++getData(){
++++++++if+(this.router.url.indexOf('page')+>+-1)+{
++++++++++++let+Id+=+this.activedRoute.snapshot.params['Id'];
++++++++++++this.busy+=+this.httpCall.get('/pub/page/GetPageById/'+%2B+Id)
+++++++++++++++++++++.subscribe(
++++++++++++++++++++++++++++data+=>+{
++++++++++++++++++++++++++++++++this.pages+=+<Page[]>data;
++++++++++++++++++++++++++++});

+++++++++++++console.log(Id);
++++++++}
++++}|code-block|syntax|javascript|3388478|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

From your logs you can see that your subscription is called three times on each route change. So that means events observable emits many signals but you interested in only one.

<pre><code> ngOnInit() {
 this.getData();
 this.router.events.filter(event =&gt; event instanceof NavigationEnd).subscribe(event =&gt; this.getData()); 
 }
 getData(){
 if (this.router.url.indexOf('page') &gt; -1) {
 let Id = this.activedRoute.snapshot.params['Id'];
 this.busy = this.httpCall.get('/pub/page/GetPageById/' + Id)
 .subscribe(
 data =&gt; {
 this.pages = &lt;Page[]&gt;data;
 });

 console.log(Id);
 }
 }
</code></pre>

blocks|key|3799266|text|当您在ngOnInit或Constructor上编写“ngOnInit”时会发生这种情况，为了解决这个问题，您应该将它写在其他函数上，比如：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3799267|onRouteChange+()+{
++++this.router.events.subscribe((event)+=>+{
++++++if+(event+instanceof+NavigationStart)+{
++++++++if+(this.router.url.indexOf('page')+>+-1)+{
++++++++++++let+Id+=+this.activedRoute.snapshot.params['Id'];
++++++++++++this.busy+=+this.httpCall.get('/pub/page/GetPageById/'+%2B+Id)
++++++++++++++++.subscribe(
++++++++++++++++data+=>+{
++++++++++++++++++++this.pages+=+<Page[]>data;
++++++++++++++++});

++++++++++++console.log(Id);++++
++++++++}
++++++}
++++})
++}|code-block|syntax|javascript|3799268|但是，在使用"this.router.events.subscribe“时，还需要考虑另一个问题，在此函数中写入的所有内容都是在页面中导航时发生的，因此最好使用这一行来防止在每次路径更改时运行它：|3799269|import+{Router,+NavigationStart}+from+'@angular/router';

onRouteChange+()+{
++++this.router.events.subscribe((event)+=>+{
++++++if+(event+instanceof+NavigationStart)+{
++++++++//+this+line
++++++++if(event.url+==+'your_page_path')
++++++++if+(this.router.url.indexOf('page')+>+-1)+{
++++++++++++let+Id+=+this.activedRoute.snapshot.params['Id'];
++++++++++++this.busy+=+this.httpCall.get('/pub/page/GetPageById/'+%2B+Id)
++++++++++++++++.subscribe(
++++++++++++++++data+=>+{
++++++++++++++++++++this.pages+=+<Page[]>data;
++++++++++++++++});

++++++++++++console.log(Id);++++
++++++++}
++++++}
++++})
++}|3799270|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

This happens when you write "this.router.events" on ngOnInit or Constructor, For fixing this issue you should write it on other function like that:

<pre><code>onRouteChange () {
 this.router.events.subscribe((event) =&gt; {
 if (event instanceof NavigationStart) {
 if (this.router.url.indexOf('page') &gt; -1) {
 let Id = this.activedRoute.snapshot.params['Id'];
 this.busy = this.httpCall.get('/pub/page/GetPageById/' + Id)
 .subscribe(
 data =&gt; {
 this.pages = &lt;Page[]&gt;data;
 });

 console.log(Id); 
 }
 }
 })
 }
</code></pre>

but there is another issue in this which you should consider when you use "this.router.events.subscribe", everything you wrote down in this function happens when you navigate in pages so it better to use this line to prevent run it on every path changes:

<pre><code>import {Router, NavigationStart} from '@angular/router';

onRouteChange () {
 this.router.events.subscribe((event) =&gt; {
 if (event instanceof NavigationStart) {
 // this line
 if(event.url == 'your_page_path')
 if (this.router.url.indexOf('page') &gt; -1) {
 let Id = this.activedRoute.snapshot.params['Id'];
 this.busy = this.httpCall.get('/pub/page/GetPageById/' + Id)
 .subscribe(
 data =&gt; {
 this.pages = &lt;Page[]&gt;data;
 });

 console.log(Id); 
 }
 }
 })
 }
</code></pre>

blocks|key|2808408|text|步骤1：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2808409|_routerSub+=+Subscription.EMPTY;|offset|length|style|CODE|2808410|第2步：|2808411|ngOnInit(){

++++this._routerSub+=+this.router.events
++++++++.pipe(filter((event:+RouterEvent)+=>+event+instanceof+NavigationEnd))
++++++++.subscribe(()+=>+{
++++++++++++this.getPosts(this.activatedRoute.snapshot.params.cattmpd);
+++++++++});
}

ngOnDestroy():+{

++++this._routerSub.unsubscribe()

}|code-block|syntax|javascript|2808412|entityMap^0|0|0|W|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@$D|S|E|T|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|U|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|V|8|@]|9|@]|A|$M|N]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

Step 1:

<code>_routerSub = Subscription.EMPTY;</code>

Step 2:

<pre><code>ngOnInit(){

 this._routerSub = this.router.events
 .pipe(filter((event: RouterEvent) =&gt; event instanceof NavigationEnd))
 .subscribe(() =&gt; {
 this.getPosts(this.activatedRoute.snapshot.params.cattmpd);
 });
}

ngOnDestroy(): {

 this._routerSub.unsubscribe()

}
</code></pre>

blocks|key|2808432|text|我也面临过同样的问题。我可以通过保持旗子来解决问题|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2808433|ngOnInit()+{
++++++++this.router.events.filter(event+=>+event+instanceof+
++++++++NavigationEnd).subscribe(()+=>+{
++++++++let+render+=+false;
++++++++if(this.router.url.indexOf('page')+>+-1+&&+!render){
++++++++//here+goes+logic+
++++++++render+=+true;
++++++}
++++}
++}**|code-block|syntax|javascript|2808434|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I have faced the same problem . I could able to resolve by maintaining a flag
<pre><code>ngOnInit() {
 this.router.events.filter(event =&gt; event instanceof 
 NavigationEnd).subscribe(() =&gt; {
 let render = false;
 if(this.router.url.indexOf('page') &gt; -1 &amp;&amp; !render){
 //here goes logic 
 render = true;
 }
 }
 }**
</code></pre>

With this code
<pre class="lang-js prettyprint-override"><code>ngOnInit() {
 this.router.events.subscribe((val) =&gt; {
 if (this.router.url.indexOf('page') &gt; -1) {
 let id = this.activedRoute.snapshot.params['Id']
 this.busy = this.httpCall.get('/pub/page/GetPageById/' + id)
 .subscribe(data =&gt; {
 this.pages = &lt;Page[]&gt;data
 })

 console.log(id)
 }
 })
}
</code></pre>
when I navigate to <code>domain.com/#/en/page/13</code> it logs <code>13</code> as expected.
But when I navigate to the page which id is <code>27</code> it logs: <code>13 13 27</code>.
When I navigate back to <code>13</code> log has: <code>27 27 13</code>.
Why is it?

router subscribe calls multiple time

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

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

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

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

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

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

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

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

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

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

用这个代码ngOnInit() {  this.router.events.subscribe((val) => {    if (this.router.url.indexOf('page') > -1) {      let id = this.activedRoute.snapshot.params['Id'] ...

问路由器多次订阅呼叫
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问路由器多次订阅呼叫EN