Question

我正在为我的项目构建面包屑（主页>日历）。我希望根据我所在的组件来更新面包屑：

主页>日历

首页>访问我们

为此，我需要当前路径（我有），并且需要使用“ Observables”来获取更改的路径。

问题1）我需要使用“可观察对象”来获取更改的路径吗？

...这就是我被困住的地方！

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute , UrlSegment} from '@angular/router';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {
	r:string;
  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
  	// Got the current route, WORKS!
  	this.r = this.route.url;
  	// But, how do I use observables to get the changed path if user goes to a different page
  	this.route.url.subscribe((url: string)=>{
  		this.r = url;
  	})
  }

}

<div class="container">
	<div class="row">
		<div class="col-sm-8">
			<h1>musem</h1>
			<h6>ONTARIO</h6>
		</div>
		<div class="col-sm-2">
			<button class="btn btn-lg">
				<i class="fas fa-envelope"></i> Edit
			</button>
		</div>
		<div class="col-sm-2">
			<button class="btn btn-lg">
				<i class="fas fa-map"></i> Find
			</button>
		</div>
	</div>

	<nav aria-label="breadcrumb">
		<ol class="breadcrumb bg-transparent">
    		<li class="breadcrumb-item"><i class="fas fa-home"></i></li>
    		<li class="breadcrumb-item active" aria-current="page">{{r}}</li>
  		</ol>
	</nav>
	<hr>
</div>

Answer 1

您应该收听路由器事件，并且通过使用NavigationEnd事件，您可以通过访问evt.url来获取正确的路径，import { Router, ActivatedRoute, NavigationEnd } from '@angular/router'; ...... ngOnInit() { this.router.events.subscribe((evt: any) => { if (evt instanceof NavigationEnd) { console.log(evt.url) //path of the route } }); }是更改后的路径的路径

Ex .
class userDetail{
  public String userName;
  public String password;
}

Answer 2

您应该将Router注入您要监听更改并订阅router.events的组件中。我在下面链接了一个stackblitz演示。

演示：https://stackblitz.com/edit/angular-router-basic-example-tpucgr?file=app/app.component.ts

恕我直言，如果在app.component.ts中创建面包屑组件，效果会更好。为面包屑创建服务。在此服务中注册面包屑组件的实例，然后将该服务注入您要更改面包屑的组件中，并在服务内部调用方法，该方法又调用面包屑组件的方法以更新面包屑。

也请参见此answer

可观察：如何获取更改的路径？

2 个答案: