ngOnInit在初始加载时仅为路由触发一次。订阅ngOnInit中的observable。在ngonDestroy中取消订阅。

下一个代码只是向你展示逻辑。它不是工作原型，而是伪代码。

@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')
  }
}

我也遇到了同样的问题，但ngOnInit中的“this.route.params.subscribe”解决方案对我来说不够好。实际上，所有子组件都不会重新加载...我发现解决这个问题的方法是：

this.router.routeReuseStrategy.shouldReuseRoute = function () {
    return false;
};

假设路由配置如下：

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

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

constructor(
  private activatedRoute: ActivatedRoute,
) {}

ngOnInit() {
 this.activatedRoute.params.subscribe(({id}) => // do something with id);
}

需要注意的是，ngOnInit仍然只会被调用一次。只有subscribe块会在每次参数更改时被调用。所以你需要对subscribe块中的参数变化做出React。

你可以通过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
    });
}