如何手动重新渲染组件? [英] How do I re-render a component manually?

问题描述

我是Angular2的新手，我习惯了Angular 1摘要循环，这意味着如果更新视图的范围，则可以通过调用$scope.$digest()手动触发摘要.但是，我不确定在Angular2中如何做到这一点，尤其是考虑到新框架没有旧版本所具有的隐式数据绑定.

I'm a newcomer to Angular2, I'm used to the Angular 1 digest cycle, meaning if I update the scope of a view I can manually trigger a digest by calling $scope.$digest(). However, I'm not sure how to do this in Angular2, esp given that the new framework doesn't have the implicit data binding that the old version had.

这是我的问题.我有一条路由，当命中带有参数的url时会加载组件:

Here's my problem. I have a route that loads a component when a url with a parameter is hit:

// Router
export const AppRoutes : RouterConfig = [
    {
    path: 'my/:arg/view',
    component: MyComponent  
    }
]

然后我有这个组件:

// Component
export class MyComponent {
    constructor(private route : ActivatedRoute,
      private r : Router) {
    let id = parseInt(this.route.params['value'].id);
    console.log(id);
    // do stuff with id
    }

    reloadWithNewId(id:number) {
        this.r.navigateByUrl('my/' + id + '/view');
    }
}

让我说我导航到URL /my/1/view.它将调用构造函数，并记录数字1.但是，如果我使用新ID reloadWithNewIf(2)调用reloadWithNewId，则不会再次调用构造函数.如何手动重新加载组件?

Lets say I navigate to url /my/1/view. It will call the constructor and the number 1 is logged. However, if I call reloadWithNewId with a new id, reloadWithNewIf(2), the constructor is not called again. How do I manually reload the component?

推荐答案

不需要重新加载组件.只需更新模型，视图即会更新:

There shouldn't be a need to reload the component. Just update the model and the view updates itself:

export class MyComponent {
    constructor(private route : ActivatedRoute,
      private r : Router) {}

    reloadWithNewId(id:number) {
        this.r.navigateByUrl('my/' + id + '/view');
    }

    ngOnInit() {
      this.sub = this.route.params.subscribe(params => {
         this.paramsChanged(params['id']);
       });
    }

    paramsChanged(id) {
      console.log(id);
      // do stuff with id

    }
}

这篇关于如何手动重新渲染组件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！