[英]Sharing @input between angular components
It is possible to share data between 2 angular components while one of them is used inside the other component? 可以在2个角度分量之间共享数据,而其中一个在另一个分量内部使用吗? I am using the following code to define the templates for the components and i would like to specify the "Source" property only once.
我正在使用以下代码来定义组件的模板,并且我只想指定一次“ Source”属性。
Is it possible to inherit the import from a parent component? 是否可以从父组件继承导入? As i will only ever use the "ui-grid-header" inside the "ui-grid"
因为我只会在“ ui-grid”中使用“ ui-grid-header”
For this project i am Angular version 5.2 对于这个项目,我是Angular 5.2版
And since i am fairly new to Angular development. 而且由于我对Angular开发还很陌生。 Is there a place where i would be able to find information like this?
有什么地方可以找到这样的信息?
Template 模板
<ui-grid [source]="gridDatasource">
<ng-template #headerTemplate let-data>
<th>
<ui-grid-header [source]="datasource" [sortColumn]="'Name'">
Name
</ui-grid-header>
</th>
<!-- Omitted rest of the code for example -->
</ng-template>
</ui-grid>
ui-grid-component UI-网格部件
@Component({
selector: 'ui-grid',
templateUrl: './grid.component.html'
})
export class GridComponent implements OnInit, AfterContentInit{
@ContentChild('headerTemplate')
headerTemplate: TemplateRef<any>;
@Input("source")
public datasource: AbstractGridDataSource;
/* Omitted rest of the code for example */
}
ui-grid-header-component UI网格报头组分
@Component({
selector: 'ui-grid-header',
template:
`
<ng-container *ngIf="datasource">
<a [ngClass]={disabled:!sortColumn} (click)="sortColumn && datasource.setOrderColumn(sortColumn)" href="javascript:void(0)">
<ng-content></ng-content>
</a>
</ng-container>
`
})
export class GridHeaderComponent {
@Input("source")
public datasource: AbstractGridDataSource;
@Input("sortColumn")
public sortColumn: string;
}
What you can do is propagate the source
from your ui-grid-header
component into all ui-grid-header
sub-components, like so: 您可以做的是将
source
从ui-grid-header
组件传播到所有ui-grid-header
子组件,如下所示:
In your GridComponent
get a hold of of the child components: 在您的
GridComponent
获取以下子组件:
@ContentChildren(GridHeaderComponent) headers: QueryList<GridHeaderComponent>;
For a simple one-time binding, simply use ngAfterContentInit
to pass the value: 对于简单的一次性绑定,只需使用
ngAfterContentInit
传递值:
ngAfterContentInit() {
this.headers.forEach(header => header.source = this.source);
}
If you need to handle many-times-binding, you'll need to use ngOnChanges
to detect whenever source
changes and propagate that down there. 如果您需要处理多次绑定,则需要使用
ngOnChanges
来检测source
何时发生更改并将其传播到那里。
Usually this is solved using shared service: 通常,这可以使用共享服务解决:
@Component({
selector: 'ui-grid',
templateUrl: './grid.component.html',
providers: [SharedService]
})
constructor GridComponent(private service:SharedService)
//save input i.e. sharedService.set(input)
//------------------------------------------------
constructor GridHeaderComponent(private service:SharedService)
//get input i.e. sharedService.get()
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.