Question

在angular js中有一个$ state.go的概念，我们能够通过它，并且该数据用作stateParams而不是url参数。如何以新的角度进行操作？我已经使用router.navigate并传递了数据，但是该数据将追加到url，但没有分配给stateParams。

Answer 1

对我来说，最明显的解决方案是使用服务。在导航之前，请调用该服务并保存日期，然后在ngOnInit中的“路由至”组件中进行检索。

我想知道这是否是实现目标的最简单/最优雅的方法。

@Injectable({
  providedIn: 'root',
})
export class DataService {

  private yourData: string;

  getYourData(): Observable<string[]> {
    return of(this.yoruData);
  }

  setYourData(dataToBeSaved: string) {
    this.yourData = dataToBeSaved;
  }

}

并这样称呼它

export class YourComponent implements OnInit {

  parameters: string;

  constructor(private dataService: DataService) { }

  ngOnInit() {
    this.getData();
  }

  getData(): void {
    this.dataService.getYourData()
        .subscribe(data=> this.parameters = data);
  }
}

要保存参数，您还需要在第一个组件中注入服务，然后通过调用setYourData（'bla'）方法保存数据。

您可以创建一个类来代替将要保存的数据。

Answer 2

1-您可以使用service进行操作：

在router.navigate之前在服务中保存变量值
然后在填充的组件中，您可以从服务中获取价值

2-您可以通过link传递数据：

如果要保持组件独立，则使用此方法。可以说，如果您直接通过链接而不是通过应用程序导航，那么您的组件仍会完美地工作。但是如果要提供服务，您将无法获得用户通过url登陆组件时的数据

这就是您可以使用第二种方法完成的方式

要从组件首次导入路由器传递值

import { Router } from '@angular/router';

现在在构造函数中

constructor(public router: Router) {
  }

然后您可以像这样路由到组件

this.router.navigate(['link_of_component', 'Param_1','Param_2');

您将必须在Routes中添加路线

{path: 'link_of_component/:Param_1/:Param_2', component: YourComponent}

现在可以在第二部分中获得价值

import {ActivatedRoute} from '@angular/router';

在构造函数中

constructor(
    public activatedRoute: ActivatedRoute
  ) { }

您可以获得这样的价值

const paramOne = this.activatedRoute.snapshot.paramMap.get('Param_1');
const paramTwo = this.activatedRoute.snapshot.paramMap.get('Param_2');

要传递数据到路由。怎么做？

2 个答案: