Question

根据我的知识输入是单向沟通。对子组件内的 @Input（）变量所做的任何更改都不会反映在父组件中。

我在app组件中有一个空数组。 App组件有两个子组件。一个是表单组件（用于添加新条目），第二个是列表组件（用于显示所有条目）。在Input的帮助下，将该空数组传递给comp。但是表单组件内部的Input（）数组的更改也反映在根组件中。并且列表组件会更新。这是代码：

app.component.ts

@Component({
selector: 'app-root',
template: `<div>
  <app-form [formElements]="serverElements"> </app-form>         
  <app-list *ngFor = "let server of serverElements" [listServer]="server">
  <app-list> 
</div>`
})
export class AppComponent {
  serverElements = [];
}

APP-form.component.html

<div class="row">
    <div class="col-xs-12">
      <p>Add new Servers or blueprints!</p>
      <label>Server Name</label>
      <input type="text" class="form-control" [(ngModel)]="newServerName">
      <label>Server Content</label>
      <input type="text" class="form-control" [(ngModel)]="newServerContent">
      <br>
      <button
        class="btn btn-primary"
        (click)="onAdd()">Add Server</button>
    </div>
</div>

APP-form.component.ts

export class FormComponent  {

 @Input() Elements=[];
 newServerName = '';
 newServerContent = '';
 constructor() { }

  onAdd() {
    this.Elements.push({
      name: this.newServerName,
      content: this.newServerContent
    });  
  }
}

app-list.component.ts
@Component({
  selector: 'app-server-element',
  template: ` <div class="panel-heading">{{ server.name }}</div>
                 <div class="panel-body">
                   <p>{{server.content}}</p>
                 </div>`,

})
export class ListComponent implements  {

 @Input() server;
  constructor() { }

}

Answer 1

我是用这种方式解决的，但仍然需要为我做更多的测试和学习。

Angular V.9.1.0

export class AppComponent implements OnInit {
  @Input() public api: ApiModule;  //ApiModule is a interface.
  @Input() public titulo = '';

  constructor(private router: Router, private dataService: DataService) {
  }

  ngOnInit() {
    setTimeout(() => {
      this.dataService.apiModule = this.api;
    });
  }
}

为什么角度4中的@Input（）表现得像双向数据绑定而不是单向？

1 个答案: