web-dev-qa-db-ja.com

経路が角度で変化するときに関数を実行する方法？

現在のURLに応じて特定の見出しを角度内に変更したいです。そのため、Component.tsは次のようになります。

import {Router} from '@angular/router';
//code
public name: string
constructor(
    public router: Router
  ) {}
getName()
{
if(this.router.url === "/some_list")
{this.name = "List"}
else if(this.router.url === "/detail")
{this.name = "Detail"}
}

 _

その後

<a>{{this.name}}</a>
 _

既存の答えは、 角度の経路変更を検出する方法 ルーティングの変更後に何かをする方法を教えてこなかった（change = trueまたはfalse）。そのため、URLが変更されるたびにこの関数を実行する方法はいつでも、見出しが現在のビューに従っていますか？

angularroutingangular-router
6
user11962606

_router event_のsubscribe（somecode）_app.component.ts_。 routeを変更するたびに発光します。

_  constructor(location: Location, router: Router) {
    // decide what to do when this event is triggered.
    router.events.subscribe(val => {
      if (location.path() != "/something") {
          // do something
      } else {
         // do something else
      }
    });
  }
_

複数回呼び出されている場合はこれを試してください

_router.events.filter(event => event instanceof NavigationEnd).subscribe(val => { // here your code... })
_

注：これを試していません

1
Surjeet Bhadauriya

このようにしてみてください：

働くデモ

.html.

<a routerLinkActive="active" routerLink="/some_list">Home</a> |
<a routerLinkActive="active" routerLink="/detail">Catalog</a>

<router-outlet (activate)="getName()"></router-outlet>
 _

。NS

getName() {
  if (this.router.url.includes("some_list")) {
      this.name = "some_list";
  } else if (this.router.url.includes("detail")) {
      this.name = "detail";
  }
  alert(this.name);
}
 _
2
Adrita Sharma

これを行ってください stackblitzリンク

ルータのすべてのナビゲーション開始イベントで、URLとFire機能を取得できます。 app.component.ts

ngOnInit(){
   this.router.events.subscribe(event =>{
      if (event instanceof NavigationStart){
         console.log(event.url)
         this.routerChangeMethod(event.url);
      }
   })
}

routerChangeMethod(url){
  this.title = url;
}
 _

Yout App.component.htmlは..

{{title}}

<router-outlet></router-outlet>
 _
1
GaurangDhorda