Angular 2 - 使用 @Input 传递 url

Question

我正在为下拉选择菜单制作一个组件。我希望能够动态加载菜单的选项。我最初是想通过使用@Input 传递所需控制器方法的 url 来获取数据来做到这一点。这是我到目前为止的内容（简化）：

export class DropdownInput {
    // List of options for the dropdown to have
    public options: InputOption[];

    // Url for controller method to get options
    @Input() optionSrc: string; 

    // Get list of options on construction
    constructor(http: Http) {
        http.get(this.optionSrc).subscribe(result => {
            this.options = result.json();
        });
    }
}

我试图像这样使用这个下拉组件：

<dropdown-input 
    [optionSrc]="/api/LogViewer/GetOpts">
</dropdown-input

但我收到错误消息：“解析器错误：在 [/api/LogViewer/GetOpts] 的第 1 列出现意外的令牌/”。我也尝试将其作为“'/api/LogViewer/GetOpts'”执行，但失败并出现错误“SyntaxError: Unexpected token

这可能吗？还是我应该尝试另一种方式来完全实现我的目标？

谢谢！

Answer 1

当你传递一个静态字符串时，你应该遵循，

<dropdown-input 
    [optionSrc]="'/api/LogViewer/GetOpts'">
</dropdown-input>

如果构造函数不适合你，那么你应该考虑使用 ngOnInit() 之类的，

ngOnInit() {
        http.get(this.optionSrc).subscribe(result => {
            this.options = result;                    
            //<<<### changed this line... as suggested by StefanSvrkota
        });
}