Angular2 RC1 - 调用组件时会触发哪个事件？

Question

我有一个产品组件，访问下面 url 显示产品列表：

/products

产品页面有分页，因此用户可以单击页面末尾显示的 Next/Previous 链接。单击第一页上的“下一步”会将用户移动到下方 url:

/products/2

在我的组件中，我实现了 ngOnInit，它根据我们当前所在的页面获取产品列表。

在 Beta 版本中，我使用 CanReuse 挂钩使其工作。但是在当前版本中，当我单击下一页时，由于在第 2 页上未调用 ngOnInit，因此它不会获取产品列表。

我在某处看到 CanReuse 将在未来的更新中添加，我想知道有没有更好的方法来实现这一点？

Answer 1

免责声明：我的英语很糟糕。

我做了一些测试，当你第二次输入或第三次输入时触发的事件是AfterViewInit

你可以这样实现：

import {Component,AfterViewInit } from '@angular/core';

import {DataTableComponent} from '../../../shared/data-table/datatable.component.ts';

@Component({
    template: require('./consultorios-list.component.html'),
    styles: [require('./consultorios-list.component.scss')],
    directives: [DataTableComponent]
})

export class ConsultoriosListComponent implements OnInit {
    private datos:any = {
        titles: null, data: null
    };

    ngAfterViewInit(){
        console.log('I was printed when you enter to this route is showed c:');
    }
    constructor() {

    }
}

享受我的朋友。

Answer 2

您可以注入 Router 并在您可以订阅的组件中使用它的 changes EventEmitter。

然后您可以使用 location.path() 来读取当前路径，例如使用 switch case。像这样：

...
constructor(private _location:Location, private _router:Router) {
    _router.changes.subscribe( () => {
        switch(this._location.path()){
            case '/products':
                 // do some stuff...
                 break;
            case '/products/2':
                // do something different...
                break;
            default:
                // do nothing..
        }
    });

Angular2 RC1 - 调用组件时会触发哪个事件？

Angular2 RC1 - Which event is fired whenever a component is called?

angular2-routing

angular