如何在不使用@Output 的情况下将更改的变量从子组件传递到父组件？

Question

我不知道如何在 angular 4 指令中使用两种方式绑定。

在 AngularJs 中我曾经这样做过：

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

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

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

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

导致只绑定到名称的一种方式。但是我想从指令本身更改变量，这可能吗？

Answer 1

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);
  }
  ...
}

Answer 2

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

为了使用ngModel，你必须在你的模块中导入FormsModule from "@angular/forms"

这是我为您制作的示例 plunker：

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 3

双向绑定

角度 1

 <input ng-model="username">

Angular2及以上版本

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

所有版本的单向绑定

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

您可以查看documentation of two way binding in angular: 了解更多信息。