跳至主要內容

组件间共享数据

约 462 字

组件间共享数据

把数据发送到子组件

配置子组件

item-detail.component.html
<p>Today's item: {{item}}</p>

配置父组件

app.component.html
<app-item-detail [item]="currentItem"></app-item-detail>

把数据发送到父组件

配置子组件

item-detail.component.html
<label for="item-input"> Add an item: </label>
<input type="text" id="item-input" #newItem />
<button type="button" (click)="addNewItem(newItem.value)">
    Add to parent's list
</button>

配置父组件

app.component.html
<app-item-output (newItemEvent)="addItem($event)"></app-item-output>

双向绑定:父子组件同步更新值

为使双向数据绑定有效,@Output()属性的名字必须遵循inputChange的模式,其中input是相应@Input()属性的名字。

例如:@Input()属性为size,则@Output()属性必须为sizeChange

配置子组件

sizer.component.html
<div>
    <button type="button" (click)="dec()" title="smaller">-</button>
    <button type="button" (click)="inc()" title="bigger">+</button>
    <span [style.font-size.px]="size">FontSize: {{size}}px</span>
</div>

配置父组件

app.component.html
<app-sizer [(size)]="fontSizePx"></app-sizer>
<div [style.font-size.px]="fontSizePx">Resizable Text</div>

双向绑定:表单中的 NgModel

因为没有任何原生 HTML 元素遵循了x值和xChange事件的命名模式,所以表单元素的双向绑定需要使用NgModel

首先导入FormsModule

import { FormsModule } from "@angular/forms";

@NgModule({
    /* . . . */

    imports: [BrowserModule, FormsModule],
    /* . . . */
})
export class AppModule {}





 



再在 HTML 的<form>元素上添加[(ngModel)]属性

<label for="example-ngModel">[(ngModel)]:</label>
<input [(ngModel)]="currentItem.name" id="example-ngModel" />

 
上次编辑于: