Question

我无法弄清楚如何在angular 4指令中使用双向绑定。

在AngularJs中，我曾经这样做过：

<random-directive binded='name' binded2="xyz"></random-directive>

在指令定义中，在名称后添加=。现在我可以从指令控制器或name更改link。

但在Angular 2-6教程中，我无法了解如何做到这一点。这样做：

<random-directive [binded]='name' [binded2]='name2'></random-directive>

导致单向绑定到名称。但是我想从指令本身改变变量，这样可能吗？

Answer 1

<random-directive [(ngModel)]='name'></random-directive>

要使用ngModel，您必须在模块FormsModule from "@angular/forms"

中导入

以下是我为你制作的一个例子：

https://plnkr.co/edit/AReq0QngbE9130Bd38Qq?p=preview

您不能将多个变量与单个ngModel一起使用，但可以将其绑定到对象。如果你在你的ts中定义了这样一个对象：

public myObject = { name: 'John', surname: 'Doe' }

然后，您可以将多个输入绑定到对象属性，如下所示：

<input [(ngModel)]="myObject.name" />
<input [(ngModel)]="myObject.surname" />

根据您的修改，您需要使用@Input()

在.ts组件中，在组件的开头声明@Input() binded;和@Input() binded2;。

export class RandomDirective {
   @Input() binded;
   @Input() binded2;
}

然后你可以使用

<random-directive [(binded)]=“myVar” [(binded2)]=“myVar2”><random-directive>

Answer 2

双向绑定

Angular 1

 <input ng-model="username">

Angular2及以上所有版本

 <input [(ngModel)]="username">

单向绑定所有版本

<p>Hello {{username}}!</p>

您可以查看此documentation of two way binding in angular:以获取更多信息。

Answer 3

This blog helped me a lot：

上述答案未指定的一件事是要发出的valueChange，以便自动反映价值变化。这让我感到困惑。

//If using ngModel this is the html
<input [ngModel]="username" (ngModelChange)="username = $event">
// Or go with [(ngModel)]
<p>Hello {{username}}!</p>
//The component here
@Component({

 selector: 'custom-counter',
  template: `
    <button (click)="decrement()">-</button>
    <span>{{counter}}</span>
    <button (click)="increment()">+</button>
  `
})
export class CustomCounterComponent {

  counterValue = 0;

  get counter() {
    return this.counterValue;
  }

  set counter(value) {
    this.counterValue = value;
  }

  decrement() {
    this.counter--;
  }

  increment() {
    this.counter++'
  }
}


// The parent here
@Component()
export class CustomCounterComponent {

  counterValue = 0;

  @Input()
  get counter() {
       return this.counterValue;
     }
      ...
  }
  //The html
<custom-counter [(counter)]="someValue"></custom-counter>

<p>counterValue = {{someValue}}</p>
//The directive with model config
@Component()
export class CustomCounterComponent {

  ...
  @Output() counterChange = new EventEmitter();

  set counter(val) {
    this.counterValue = val;
    this.counterChange.emit(this.counterValue);
  }
  ...
}

如何在不使用@Output的情况下将更改的变量从Child组件传递给Parent组件？

3 个答案:

双向绑定

单向绑定所有版本