Question

我当时想我需要在AngularTS组件的Child组件中利用Output注释来更改父属性，但是我认为我可以这样做：[(item)]="myItem"并且它将绑定正确。

我当时正在查看Output和EventEmitters，但是正在创建新的变量，这些变量仅受监视以执行以下功能：

@Output() clicked = new EventEmitter<number>();

，然后将其引用为：

(clicked)="myFunc(id)"

考虑到我的用例，我认为不需要Output，因为我没有执行父类中定义的函数，只是想在这种情况下更新属性 myItem 。

这是关于如何绑定以及我是否应该使用Output注释的正确思考过程吗？

我要添加一些示例代码。

组件1 HTML：

<sub-component [(selection)]="selection"></sub-component>

组件1 TS：

export class MyComponent implements OnInit {
    @Input() selection: string = "";
    @Output() selectionChange: EventEmitter<string> = new EventEmitter<string>();
}

子组件HTML：

<div></div>

子组件TS：

export class SubComponent implements OnInit {
    @Input() selection: string;
    @Output() selectionChange: EventEmitter<string> = new EventEmitter<string>();

    doStuff(): void {
      this.selection = "test";
      this.selectionChange.emit(this.selection);
    }
}

问题在于MyComponent具有选择属性，但从未在其中分配它，它实际上只是将其传递到更高的级别，因此，由于未在代码中进行设置，因此我不能说：{{1} }。给定一些答案，我该如何解决这个概念？它会自动消失，还是我必须创建某种StreamListener来监视变量更改？

Answer 1

对于双向绑定，您应该遵循此模式，注意事件名称应为您的输入名称+ Change，然后双向绑定才起作用，当您更改myInput的值时，在您的组件中变更事件。

@Input() myInput : type;
@Output() myInputChange: EventEmitter<type> = new EventEmitter<type>();

用法

<my-component [(myInput)]="input"></my-component>

方框中的香蕉只是下面这样的语法糖

<my-component [myInput]="input" (myInputChange)="input=$event"></my-component>

请注意，这是针对Components而非Services

angular.io/guide/template-syntax#two-way-binding---

Answer 2

像([clicked])这样的双向数据绑定仅在组件内部起作用。由于您的要求是在父组件和子组件之间进行通信，因此您需要一些使父母或孩子知道其他组件已更改的东西。

此外，两种方式的数据绑定主要用于从视图到模型进行通信（显然按照角度1.xx），而并不意味着从父部件到子部件进行通信，这不同于角度1.xx和角度+2。 xx

根据您的情况，您可以使用EventEmitor或@Output RxJs来使用Subject。

希望它能回答您的问题

Answer 3

https://angular.io/guide/template-syntax#two-way-binding

一个好的方法是使用属性设置方法来发出更改事件：

private _selection: any;
get selection(): any {
    return this._selection;
}
@Input()
set selection(value: any) {
    if(this._selection === value) {
        return;
    }
    this._selection = value;
    this.selectionChange.emit(this._selection);
}
@Output()
selectionChange = new EventEmitter<any>();

必须通过在@Output名称上添加propertyNameChange来命名@Input。您可以在父子子级中使用它来交换数据。 父组件

<mycomponent [(selection)]="fieldInParentComponent"></mycomponent>

我的组件

<subchildcomponent [(childField)]="selection"></subchildcomponent>

注意：subchildcomponent aloso必须像mecomponent中那样实现两种方式的绑定。

我创建了一个示例，看起来它是一个常见问题： https://stackblitz.com/edit/angular-2-way-binding?embed=1&file=src/app/app.component.html

与变量进行双向绑定，而不使用发射器？

3 个答案: