Angular2从调用服务的构造函数中的类访问@Input

Question

我是 Angular2 和 Typescript 的新手。我正在尝试从我的类中的构造函数访问@Input。从构造函数内部调用了一个服务，我需要向它传递一个参数。

@Component({
    selector:'side-menu',
    templateUrl:'menu.html',
    providers:    [MenuService]
 })

export class SideMenuComponent {
    @Input() blockType;

    menuItems

    constructor(menuService:MenuService){
        this.menuItems = menuService.getMenuItems(this.blockType); // Sends Undefined
        this.menuItems = menuService.getMenuItems('HardCodedString'); //This works
    }


}

这是我的服务

    @Injectable()

export class MenuService {
    getMenuItems(type) {
        console.log(type)

        switch(type){
            case 'Thing':

                return [];
                break;
            case 'Otherthing':
                return [];
                break;
            default:
                return [];


        }

    }
}

如何确保@Input 被发送到服务？

Answer 1

调用构造函数时尚未设置输入。将构造函数代码移至ngOnInit()。

@Component({
    selector:'side-menu',
    templateUrl:'menu.html',
    providers:    [MenuService]
 })

export class SideMenuComponent {
    @Input() blockType;

    menuItems

    constructor(private menuService:MenuService){}

    ngOnInit() {
        this.menuItems = this.menuService.getMenuItems(this.blockType); // Sends Undefined
        this.menuItems = this.menuService.getMenuItems('HardCodedString'); //This works
    }
}

每次更新@Input()s 时都会调用ngOnChanges()。
在第一次调用ngOnChanges() 之后调用ngOnInit()。