Question

将数据传递到路由的当前Angular方法是将其添加到路由中。

例如，在关于官方Angular文档的英雄导览中，使用路径hero/:id将id传递给英雄组件。

如果不使用服务作为中间人，或使用本地存储等临时保留某些数据，id，在这种情况下，是否可以通过id？

Answer 1

可以通过可观察的方式发送信息

service.ts

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';

@Injectable()
export class LoadDataService {
  private setdataEmmit = new BehaviorSubject('initial info');
  public getdataEmmit$ = this.setdataEmmit.asObservable();

  constructor() { }

  sendData(data: any) {
    this.setdataEmmit.next(data)
  }
}

component1.ts

import { LoadDataService  } from '.....';

@Component({
  selector: 'app-1',
  templateUrl:'',
  styleUrls: ['']

})
export class Component1 implements OnInit {

  constructor(
    private _loadDataService: LoadDataService
  ) { 
  }
  ngOnInit() {
    this._loadDataService.sendData('info send');  
  }
}

component2.ts

import { LoadDataService  } from '.....';

@Component({
  selector: 'app-2',
  templateUrl:'',
  styleUrls: ['']

})
export class Component2 implements OnInit {

  constructor(
    private _loadDataService: LoadDataService
  ) { 
  }
  ngOnInit() {
    this._loadDataService.getdataEmmit$.subscribe(
      (data) => {
        console.log(data);
        // print: 'info send'
           // YOU ALREADY HAVE THE DATA YOU SENT FROM THE COMPONENT 1
      });
  }
}

如何将隐藏的查询参数传递给Angular 5中的路径？

1 个答案: