javascript - 在 Angular 2 中跨组件共享事件驱动变量

Question

我有一个组件，其中有一个数据表，我使用管道过滤该数据表，

我触发并向管道发送新参数的方式是在输入标记上的输入事件上，我捕获“targetInput”变量中的输入，

上述设置有效，如下所示:

        <tr >
            <td  *ngFor="let column of currentView.columns">
                <div *ngIf="column.label">
                    <input placeholder="{{column.label}}" id="{{column._devName}}" type="text"
                           (input)="targetInput = {targetValue:$event.target.value,targetId:$event.target.id,currentFilterMap:currentFilterMap}">
                </div>
            </td>
        </tr>

        <ng-container *ngFor="let task of (currentView.tasks | countryPipe:targetInput); let i=index">
            <tr class="worktask" (click)="setCurrentTask($event, task)" (dblclick)="openWindowNewTab(getOpenTaskURL(task, currentView.process))"
                id="workspace_table_wo_{{ task.workOrderId }}_task_{{ task.taskId }}"
                [class.table-active]="isSelected(task)">
                <td *ngFor="let column of currentView.columns">{{task[column.devName]}}</td>
            </tr>

现在我决定，我想要一个单独的输入标记组件，因此我拆分了 html 并进行父子设置并使用 @Input 装饰器传递共享变量，

这就是新设置的样子，父级 HTML:

    <tr >
        <td  *ngFor="let column of currentView.columns">
            <filterTagBox [taskCol] = "column" [currentFilterMap] = "currentFilterMap"></filterTagBox>
        </td>
    </tr>
    <ng-container *ngFor="let task of (currentView.tasks | countryPipe:targetInput); let i=index">
        <tr class="worktask" (click)="setCurrentTask($event, task)" (dblclick)="openWindowNewTab(getOpenTaskURL(task, currentView.process))"
            id="workspace_table_wo_{{ task.workOrderId }}_task_{{ task.taskId }}"
            [class.table-active]="isSelected(task)">
            <td *ngFor="let column of currentView.columns">{{task[column.devName]}}</td>
        </tr>

现在我似乎无法在输入事件上将 targetInput 从子组件传递回父组件，不确定这是否是我应该实现的方式或者是否有更好的方法。

Answer 1

我认为在你的例子中，父级是Parent html，子级是filterTagBox。如果您想将值(value)从 parent 转移到 child ，您需要使用@input

如果您想将值从子级转移到父级，您需要使用EventEmitter和@Output

更多信息。 https://angular.io/docs/ts/latest/cookbook/component-communication.html