使用 @Input 和 @Output 传递事件和 URL答案

【问题标题】：Passing Events and urls with @Input and @Output使用 @Input 和 @Output 传递事件和 URL
【发布时间】：2017-03-03 21:10:11
【问题描述】：

完全是 angular2 的初学者，而不是经验丰富的 Web 开发人员，所以对于这个问题中存在的任何极端愚蠢，我深表歉意......

我在为下拉选择列表制作组件时遇到了一些问题。我的目标是在另一个组件中使用该组件，并在每次按下选择列表上的选项时调用父组件中的方法。

这是下拉输入（子组件）的模板：

    <div>
    <select>
        <option (click)="clicked($event)" *ngFor="let option of options">{{option.label}}</option>
    </select>
    </div>

下面是这个类的样子：

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

// Url for controller method to get options
@Input() url = "/api/LogViewer/GetOpts";

@Output() clickEvent = new EventEmitter();

public clicked(event) {
    this.clickEvent.emit(event);
}

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

interface InputOption {
    value: string;
    label: string;
}

因此，据我了解，每个下拉选项在单击时都绑定了“clicked()”方法。该方法应该将点击事件传递给父绑定到“clickEvent”的方法。

这是我在父组件中使用此组件的方式：

<dropdown-input (clickEvent)="typeClick($event)"></dropdown-input>

而父组件在类里面有这个方法：

public typeClick(event) {
    console.log(event);
}

这个设计是有根本缺陷还是我只是犯了一个愚蠢的错误？运行时我没有收到任何错误或任何内容，但更改下拉选项也不会记录任何内容。

第二个问题：有没有一种好方法可以将 url 作为输入传递给下拉组件？只是将“[url]="/api/LogViewer/GetOpts" 放在下拉输入的用法中会出错。

谢谢！

附：只是为了避免 XY 问题，我这样做是因为我想创建一个组件，它基本上是一个输入面板（文本框、下拉选择、单选按钮、日历），我可以在许多不同的页面上动态创建它（用于在数据表顶部进行过滤等）。我猜这类似于表单，是否已经有解决方案？

【问题讨论】：

标签： angular angular2-template

【解决方案1】：

您正在收听选项上的 (click) 事件，但您应该正在收听更改事件。当您想要传递选择的值时，您还将实际事件传递给您的父组件。你可以这样做：

<select (change)="onChange($event.target.value)">

如果你这样做，onChange 方法将被选择的值调用，而不是实际的更改事件。

【讨论】：