根据我的知识输入是单向沟通。对子组件中的@Input（）变量所做的任何更改都不会反映在父组件中。
我有一个空数组在应用程序组件。应用组件有两个子组件。一个是表单组件（添加新条目），第二个是列表组件（显示所有条目）。该空数组被传递到形式comp的帮助下输入。而表单组件中Input（）数组的变化也反映在根组件中。列表组件得到更新。下面是代码：
应用程序。组成部分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 = [];
}
应用程序表单。组成部分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>
应用程序表单。组成部分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() { }
}
我用这种方式解决了它，但只剩下为我做更多的测试和学习。
角形V.9。1
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;
});
}
}
