组件ngOnInit调用路由参数更改

4 回答

• 0

  首次加载时，ngOnInit仅对路径触发一次 . 在ngOnInit中订阅observable . 和unSubscribe在ngonDestroy中 .

  回复于 2024-04-28T17:52:11+08:00
• 0

  下一个代码只是为了向您展示逻辑 . 它不是原型，而是ts伪代码 .

  @Component
  class Parent {   
  
    constructor(private _service: Service, private _router: Router){
  
    }  
  
    ngOnInit(){
      //subscribe to route changes
      Router.events.subscribe(() => this.updateOnRouteChange());   
    }
  
    private updateOnRouteChange(){
      this._service.getSomeData().subscribe((data) => {
        this.someValueWhichIsInputForChild = data;
      });
  
      //sometimes you need to use Observable.zip or Observable.forkJoin to subscribe for 
      // few service/api calls 
      Observable.zip(this._service.getSomeData(), this._service.getAnotherData()).subscribe(() => {
        //do stuff
      })
    }
  
    doChildStuffHandler(inputValue:any){
      doApiCall(inputValue);
    }
  
    ngOnDestroy(){
      //unsubscribe from child events.
      //unsubscribe from route changes
    }
  }
  
  class Child{
  
    @Output
    onSomeAction = new EventEmitter();  
  
    @Input
    someInputValue:any;
  
    doStuff(){
      onSomeAction.emit('value from changed input or something else')
    }
  }
  

  回复于 2024-04-28T17:52:11+08:00
• -1

  假设以下路由配置：

  {
    path: ':id',
    component: AppComponent,
  }
  

  您可以订阅组件中的params更改，如下所示：

  constructor(
    private activatedRoute: ActivatedRoute,
  ) {}
  
  ngOnInit() {
   this.activatedRoute.params.subscribe(({id}) => // do something with id);
  }
  

  需要注意的重要一点是 ngOnInit 仍然只会被调用一次 . 每次参数更改时，只会调用订阅块 . 所以你需要对订阅块中的param更改做出反应 .

  回复于 2024-04-28T17:52:11+08:00
• -1

  您可以使用以下代码段通过observable获取数据： this.route.params.subscribe()

  import { ActivatedRoute } from '@angular/router';
  constructor(private route: ActivatedRoute){
  
  
  }
  
  ngOnInit(){
  //put the below code in ngOninit
  
      this.route.params.subscribe(params=>{
          //you get params object with parameter passed
          //ex: let id = params.id or take any action
      });
  }
  

  回复于 2024-04-28T17:52:11+08:00