Question

我试图获取一个字符串，告诉我用于访问该页面的网址 - 例如，如果有人导航到localhost / messages / inbox我想要＆＃39;消息＆＃ 39;路线的一部分作为字符串。

到目前为止，我用来执行此操作的代码是：

    import { Router, RouterModule, ActivatedRoute } from '@angular/router';

    @Component({
      selector: 'app-sub-nav',
      templateUrl: './sub-nav.component.html',
      styleUrls: ['./sub-nav.component.css']
    })
    export class SubNavComponent implements OnInit {

      constructor(private router: ActivatedRoute) { }

      ngOnInit() {

         console.log(this.router.snapshot);

      }
   }

当我查看控制台时，它返回整个ActivatedRoute对象，但大多数属性都是空的。包括快照，孩子，父母等。我有什么遗失的东西吗？

快速说明 - 每次路线更改时我都需要更新此字符串。之前我确实使用过Router对象，但每次路由更改时都会保持静态。

Answer 1

快速说明 - 每次路线时都需要此字符串更新变化。我之前使用过Router对象，但是每次路线改变时，这似乎都是静止的。

订阅Router NavigationEnd活动。

NavigationEnd - 表示导航成功结束时触发的事件

 ngOnInit() {
    this.router.events.subscribe(events => {
      if (events instanceof NavigationEnd) {
        console.log('NavigationEnd evnet', events);
      }
    })
  }

因此，每次成功导航到路线时，此事件都会被事件对象触发：

{
 urlAfterRedirects: string
  toString(): string
  // inherited from router/RouterEvent
  id: number
  url: string
}

StackBlitz EXAMPLE

Answer 2

尝试：

this.router.data
      .subscribe(
         (data) => {
             console.log('data', data);
       });

Answer 3

您可以通过多种方式使用导航。所以我没有给你一个简单的答案，而是回答这个问题来帮助你。我的应用程序是一个购物车，但这是我搜索最畅销/新翻新产品，只是正常搜索的方式。在您的情况下，位置：/ messages / inbox和searchStr = messageStr。这就是你的导航方式。

goToMessage(searchStr: string){
if(this.productQuery.isTopSelling) 
  this._router.navigate(['/' + location + '/' + searchStr], 
    {queryParams: {isTopSelling: true}});
else if(this.productQuery.newPreRepurbished != 'none')
  this._router.navigate(['/' + location + '/' + searchStr], 
    {queryParams: {npr: this.productQuery.newPreRepurbished}});
else this._router.navigate(['/' + location + '/' + searchStr]);
}

这是我从路线中检索信息的方式。

   this.route.queryParams.subscribe(
    params=>{
      let messageStr =  params['id']; //how you retrieve the message
      let isTopSelling = params['isTopSelling'] || false; //search by boolean
      let newPreRepurbished = params['npr'] || 'none';
      let brand = params['brnd'] || 'none'; //search by string
    });

您可以使用queryParams向路径发送更多信息。我希望我不要混淆你。希望这可以帮助。快乐的编码。

因为你得到一个静态答案（没有改变），你可能需要实现OnChanges。

ngOnChanges(){
  this.ngOnInit();
}

Angular 2 ActivatedRoute返回空

3 个答案: