Question

我有一个组件A，它在路由＆＃39; test / 1＆＃39;上初始化。当我再次导航到＆＃39; test / 2＆＃39;从组件A中，没有调用ngOnInit。此处参数已更改，因此预期结果是重新加载与参数2相关的组件详细信息。我的理解有什么差距吗？

Answer 1

在最初加载时，

ngOnInit将仅为路线触发一次。在ngOnInit中订阅observable。并且在ngonDestroy中取消订阅。

Answer 2

下一个代码只是为了向您展示逻辑。它不是原型，而是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')
  }
}

Answer 3

假设以下路线配置：

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

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

constructor(
  private activatedRoute: ActivatedRoute,
) {}

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

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

Answer 4

您可以使用以下代码段通过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 }); }

组件ngOnInit调用路由参数更改

4 个答案: